vue实现表格界面

使用 Vue 实现表格界面

基础表格实现

使用 el-table 组件可以快速创建基础表格结构。需要定义 data 属性绑定表格数据，columns 定义列配置。

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

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

动态列渲染

通过 v-for 动态渲染列配置，适合列数量不固定的场景。

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

<script>
export default {
  data() {
    return {
      columns: [
        { prop: 'date', label: '日期' },
        { prop: 'name', label: '姓名' }
      ],
      tableData: [...]
    }
  }
}
</script>

自定义单元格内容

使用插槽可以自定义单元格显示内容和样式。

<el-table-column label="操作">
  <template #default="scope">
    <el-button @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, 50]"
  :page-size="pageSize"
  layout="total, sizes, prev, pager, next"
  :total="total"
/>

表格排序

通过 sortable 属性启用列排序功能。

<el-table-column 
  prop="date" 
  label="日期" 
  sortable
  :sort-method="customSort"
/>

表格筛选

使用 filter-method 实现自定义筛选逻辑。

<el-table-column
  prop="status"
  label="状态"
  :filters="[
    { text: '完成', value: 'done' },
    { text: '进行中', value: 'pending' }
  ]"
  :filter-method="filterHandler"
/>

响应式表格

通过监听窗口大小变化动态调整表格尺寸。

mounted() {
  window.addEventListener('resize', this.handleResize)
},
methods: {
  handleResize() {
    this.$refs.table.doLayout()
  }
}

性能优化

对于大数据量表格，可使用虚拟滚动提升性能。

<el-table
  :data="tableData"
  height="500"
  v-loading="loading"
  row-key="id"
>
  <!-- 列配置 -->
</el-table>

导出功能

借助第三方库如 xlsx 实现表格数据导出。

import * as XLSX from 'xlsx'
methods: {
  exportExcel() {
    const wb = XLSX.utils.table_to_book(document.querySelector('.el-table'))
    XLSX.writeFile(wb, '表格数据.xlsx')
  }
}