vue table组件实现

Vue Table 组件实现方法

基础表格实现

使用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>

动态列渲染

通过v-for动态生成表格列：

<el-table :data="tableData">
  <el-table-column 
    v-for="col in columns"
    :key="col.prop"
    :prop="col.prop"
    :label="col.label">
  </el-table-column>
</el-table>

自定义列模板

使用插槽实现复杂单元格内容：

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

表格排序与筛选

添加sortable和filters属性实现功能：

<el-table-column
  prop="date"
  label="日期"
  sortable
  :filters="[
    { text: '北京', value: '北京市' },
    { text: '上海', value: '上海市' }
  ]"
  :filter-method="filterHandler">
</el-table-column>

分页功能实现

结合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>

性能优化建议

大数据量时启用虚拟滚动：

<el-table
  :data="tableData"
  height="400"
  v-loading="loading"
  row-key="id">
</el-table>

自定义样式

通过CSS覆盖默认样式：

.el-table .warning-row {
  background-color: #fff8e6;
}
.el-table .success-row {
  background-color: #f0f9eb;
}