当前位置：首页 > VUE

vue element实现表格

2026-03-28 05:05:39VUE

使用 Vue 和 Element UI 实现表格

安装 Element UI

确保项目已安装 Vue 和 Element UI。通过 npm 或 yarn 安装 Element UI：

npm install element-ui

在 main.js 中引入 Element UI：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

基本表格实现

在 Vue 组件中使用 el-table 组件，通过 data 属性绑定表格数据：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2023-01-01', name: '张三', address: '北京市' },
        { date: '2023-01-02', name: '李四', address: '上海市' },
      ]
    };
  }
};
</script>

表格排序与筛选

通过 sortable 和 filters 实现排序与筛选功能：

vue element实现表格

<el-table-column 
  prop="date" 
  label="日期" 
  sortable 
  width="180">
</el-table-column>

<el-table-column 
  prop="name" 
  label="姓名" 
  :filters="[{ text: '张三', value: '张三' }, { text: '李四', value: '李四' }]"
  :filter-method="filterHandler">
</el-table-column>

在 methods 中定义筛选方法：

methods: {
  filterHandler(value, row) {
    return row.name === value;
  }
}

分页功能

结合 el-pagination 实现分页：

<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="currentPage"
  :page-sizes="[10, 20, 30]"
  :page-size="pageSize"
  layout="total, sizes, prev, pager, next, jumper"
  :total="total">
</el-pagination>

在 data 和 methods 中定义分页逻辑：

vue element实现表格

data() {
  return {
    currentPage: 1,
    pageSize: 10,
    total: 100
  };
},
methods: {
  handleSizeChange(val) {
    this.pageSize = val;
  },
  handleCurrentChange(val) {
    this.currentPage = val;
  }
}

自定义列模板

通过 slot-scope 自定义列内容：

<el-table-column label="操作">
  <template slot-scope="scope">
    <el-button @click="handleEdit(scope.row)">编辑</el-button>
    <el-button @click="handleDelete(scope.row)">删除</el-button>
  </template>
</el-table-column>

定义对应方法：

methods: {
  handleEdit(row) {
    console.log('编辑', row);
  },
  handleDelete(row) {
    console.log('删除', row);
  }
}

动态加载数据

通过异步请求加载表格数据：

methods: {
  fetchData() {
    axios.get('/api/data').then(response => {
      this.tableData = response.data;
    });
  }
},
created() {
  this.fetchData();
}

以上方法涵盖了 Vue 和 Element UI 实现表格的核心功能，包括基础表格、排序筛选、分页和动态数据加载。