Vue在线表格实现

Vue在线表格实现方案

使用Element UI的el-table组件

Element UI提供了功能强大的表格组件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: '北京市'
      }]
    }
  }
}
</script>

使用VxeTable高级表格

VxeTable是专为Vue设计的高性能表格库，支持虚拟滚动、单元格编辑等高级功能：

npm install xe-utils vxe-table

<template>
  <vxe-table :data="tableData">
    <vxe-column type="seq" width="60"></vxe-column>
    <vxe-column field="name" title="姓名"></vxe-column>
    <vxe-column field="role" title="角色"></vxe-column>
    <vxe-column field="age" title="年龄"></vxe-column>
  </vxe-table>
</template>

实现可编辑单元格

通过自定义单元格模板实现编辑功能：

<el-table-column label="操作">
  <template #default="scope">
    <el-input v-model="scope.row.name" @change="handleEdit(scope.row)"></el-input>
  </template>
</el-table-column>

添加表格工具栏

集成工具栏实现导出、打印等功能：

<el-table>
  <template #header>
    <el-button @click="exportExcel">导出Excel</el-button>
    <el-button @click="addRow">新增行</el-button>
  </template>
</el-table>

实现虚拟滚动优化性能

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

<vxe-table
  border
  show-overflow
  height="600"
  :row-config="{isCurrent: true, isHover: true}"
  :scroll-y="{enabled: true, gt: 20}">
</vxe-table>

集成Excel导入导出

使用xlsx库实现Excel文件处理：

npm install xlsx

import * as XLSX from 'xlsx'

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

实现服务端分页

结合后端API实现分页查询：

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

表格样式自定义

通过CSS覆盖或使用组件提供的样式API定制外观：

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