vue实现的复杂表格

Vue 实现复杂表格的方法

使用 Element UI 的 Table 组件

Element UI 提供了功能丰富的 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: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }]
    }
  }
}
</script>

自定义单元格渲染

对于需要自定义样式的单元格，可以使用 scoped slot 实现复杂的渲染逻辑。

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

实现可编辑表格

通过结合表单组件可以实现单元格编辑功能。

<el-table-column prop="name" label="姓名">
  <template #default="scope">
    <el-input v-model="scope.row.name" v-if="scope.row.editable"></el-input>
    <span v-else>{{ scope.row.name }}</span>
  </template>
</el-table-column>

使用 Vue Grid Layout 实现拖拽排序

对于需要拖拽调整列顺序或行顺序的需求，可以集成 vue-grid-layout 等第三方库。

<grid-layout
  :layout.sync="layout"
  :col-num="12"
  :row-height="30"
  :is-draggable="true"
  :is-resizable="true"
>
  <grid-item v-for="item in layout" :key="item.i"
    :x="item.x" :y="item.y" :w="item.w" :h="item.h"
  >
    {{ item.content }}
  </grid-item>
</grid-layout>

虚拟滚动优化性能

对于大数据量的表格，可以使用 vue-virtual-scroller 实现虚拟滚动，提升性能。

<RecycleScroller
  class="scroller"
  :items="list"
  :item-size="32"
  key-field="id"
  v-slot="{ item }"
>
  <div class="user">
    {{ item.name }}
  </div>
</RecycleScroller>

集成 Excel 导出功能

通过 xlsx 库可以实现表格数据导出为 Excel 文件。

import XLSX from 'xlsx'

exportExcel() {
  const ws = XLSX.utils.json_to_sheet(this.tableData)
  const wb = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(wb, ws, "Sheet1")
  XLSX.writeFile(wb, "table.xlsx")
}

实现树形表格

对于层级数据，可以使用支持树形结构的表格组件。

<el-table
  :data="tableData"
  row-key="id"
  default-expand-all
  :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
>
  <el-table-column prop="date" label="日期"></el-table-column>
  <el-table-column prop="name" label="姓名"></el-table-column>
</el-table>