vue实现在线表格

Vue 实现在线表格的方法

使用 Element UI 的表格组件

Element UI 提供了功能丰富的表格组件，适合快速实现在线表格功能。安装 Element UI 后，可以直接使用 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>

使用 VxeTable 实现高级功能

如果需要更复杂的表格功能（如编辑、排序、分页等），可以使用 VxeTable。它是一个基于 Vue 的高性能表格库。

<template>
  <vxe-table :data="tableData">
    <vxe-column type="seq" title="序号" width="60"></vxe-column>
    <vxe-column field="name" title="姓名"></vxe-column>
    <vxe-column field="age" title="年龄"></vxe-column>
    <vxe-column field="sex" title="性别"></vxe-column>
  </vxe-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 25, sex: '男' },
        { name: '李四', age: 30, sex: '女' }
      ]
    }
  }
}
</script>

实现可编辑表格

通过结合 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">
      <template #default="scope">
        <el-input v-model="scope.row.name"></el-input>
      </template>
    </el-table-column>
  </el-table>
</template>

表格数据绑定与后端交互

通过 Axios 或其他 HTTP 客户端与后端 API 交互，动态加载表格数据。

<script>
import axios from 'axios';

export default {
  data() {
    return {
      tableData: []
    }
  },
  mounted() {
    axios.get('/api/table-data').then(response => {
      this.tableData = response.data;
    });
  }
}
</script>

表格导出功能

使用第三方库如 xlsx 实现表格数据导出为 Excel 文件。

import XLSX from 'xlsx';

methods: {
  exportExcel() {
    const worksheet = XLSX.utils.json_to_sheet(this.tableData);
    const workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
    XLSX.writeFile(workbook, '表格数据.xlsx');
  }
}

表格分页与筛选

Element UI 提供了内置的分页和筛选功能，可以轻松实现。

<template>
  <el-table :data="filteredData">
    <el-table-column prop="name" label="姓名"></el-table-column>
  </el-table>
  <el-pagination
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-size="pageSize"
    layout="total, prev, pager, next"
    :total="total">
  </el-pagination>
</template>

以上方法涵盖了 Vue 中实现在线表格的常见需求，从基础展示到高级功能均可实现。根据项目需求选择合适的方案即可。