vue element实现表格

Vue + Element UI 实现表格

Element UI 提供了强大的表格组件 el-table，结合 Vue 可以快速实现数据展示、排序、筛选等功能。

基础表格实现

安装 Element UI 后，引入 el-table 组件：

<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 属性实现：

<el-table-column 
  prop="date" 
  label="日期" 
  sortable
  :filters="[
    { text: '2023-01-01', value: '2023-01-01' },
    { text: '2023-01-02', value: '2023-01-02' }
  ]"
  :filter-method="filterHandler">
</el-table-column>

自定义列模板

使用插槽自定义列内容：

<el-table-column label="操作">
  <template #default="scope">
    <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
  </template>
</el-table-column>

分页功能

结合 el-pagination 组件实现分页：

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

表格事件处理

常用事件包括 row-click、selection-change 等：

<el-table 
  @row-click="handleRowClick"
  @selection-change="handleSelectionChange">
</el-table>

动态加载数据

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

methods: {
  loadData() {
    axios.get('/api/data').then(response => {
      this.tableData = response.data
    })
  }
}

响应式布局

使用 flex 布局或响应式断点确保表格在不同设备上正常显示：

.el-table {
  overflow-x: auto;
}

通过以上方法可以快速实现功能丰富的表格组件。Element UI 的表格组件支持高度定制，可根据实际需求调整样式和功能。