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 的高性能表格库，支持复杂的表格功能如树形表格、虚拟滚动、导出 Excel 等。

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

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

自定义表格组件

如果需要完全自定义的表格，可以通过 Vue 的动态组件和插槽功能实现灵活的表格渲染。

<template>
  <table class="custom-table">
    <thead>
      <tr>
        <th v-for="column in columns" :key="column.key">{{ column.title }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, index) in data" :key="index">
        <td v-for="column in columns" :key="column.key">{{ row[column.key] }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  props: {
    columns: Array,
    data: Array
  }
}
</script>

导出表格为 Excel

使用 xlsx 库可以将表格数据导出为 Excel 文件。

import XLSX from 'xlsx'

export default {
  methods: {
    exportToExcel() {
      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, '报表.xlsx')
    }
  }
}

动态加载表格数据

通过 API 动态加载表格数据，结合分页功能实现大数据量的展示。

export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0
    }
  },
  methods: {
    async fetchData() {
      const res = await api.getData({
        page: this.currentPage,
        size: this.pageSize
      })
      this.tableData = res.data
      this.total = res.total
    }
  },
  created() {
    this.fetchData()
  }
}

以上方法可以根据具体需求选择适合的方案来实现 Vue 中的表格报表功能。