vue 表格实现

Vue 表格实现方法

基础表格实现

使用 el-table 组件（Element UI）实现基础表格：

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

自定义列模板

通过插槽自定义列内容：

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

表格排序与筛选

添加排序和筛选功能：

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

分页功能

结合分页组件实现数据分页：

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

虚拟滚动优化

对于大数据量表格，可使用虚拟滚动：

<el-table
  :data="tableData"
  height="500"
  row-key="id"
  :row-height="50">
  <!-- 列定义 -->
</el-table>

响应式表格

根据屏幕尺寸调整表格显示：

computed: {
  tableHeight() {
    return window.innerHeight - 200
  }
}

<el-table :height="tableHeight"></el-table>

表格导出功能

实现表格数据导出为Excel：

import XLSX from 'xlsx'

exportTable() {
  const wb = XLSX.utils.table_to_book(document.querySelector('.el-table'))
  XLSX.writeFile(wb, '表格数据.xlsx')
}

动态列生成

根据配置动态生成列：

computed: {
  tableColumns() {
    return this.columnConfig.map(config => {
      return {
        prop: config.field,
        label: config.label,
        width: config.width || ''
      }
    })
  }
}

<el-table-column 
  v-for="col in tableColumns" 
  :key="col.prop"
  :prop="col.prop"
  :label="col.label"
  :width="col.width">
</el-table-column>