vue实现表格报表

Vue 实现表格报表的方法

使用 Element UI 的表格组件

Element UI 提供了功能丰富的表格组件，适合快速实现报表功能。安装 Element UI 后，可以直接使用 el-table 组件展示数据。

<template>
  <el-table :data="tableData" border 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="amount" label="金额"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2023-01-01', name: '张三', amount: 1000 },
        { date: '2023-01-02', name: '李四', amount: 2000 }
      ]
    }
  }
}
</script>

使用 VxeTable 实现高级功能

如果需要更复杂的表格功能（如虚拟滚动、导出 Excel），可以使用 VxeTable。安装后，通过配置列和数据实现报表。

<template>
  <vxe-table :data="tableData">
    <vxe-column field="date" title="日期"></vxe-column>
    <vxe-column field="name" title="姓名"></vxe-column>
    <vxe-column field="amount" title="金额"></vxe-column>
  </vxe-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2023-01-01', name: '张三', amount: 1000 },
        { date: '2023-01-02', name: '李四', amount: 2000 }
      ]
    }
  }
}
</script>

自定义表格组件

对于高度定制化的需求，可以手动实现表格组件。通过 v-for 动态渲染表头和表体数据。

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

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

集成图表与表格

报表通常需要结合图表展示数据。使用 ECharts 或 Chart.js 在表格旁添加可视化图表。

<template>
  <div>
    <el-table :data="tableData"></el-table>
    <div ref="chart" style="width: 600px; height: 400px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  mounted() {
    const chart = echarts.init(this.$refs.chart)
    chart.setOption({
      xAxis: { type: 'category', data: ['一月', '二月'] },
      yAxis: { type: 'value' },
      series: [{ data: [1000, 2000], type: 'bar' }]
    })
  }
}
</script>

数据导出功能

通过 xlsx 库实现表格数据导出为 Excel 文件，适合报表需求。

<template>
  <el-button @click="exportExcel">导出 Excel</el-button>
  <el-table :data="tableData" ref="table"></el-table>
</template>

<script>
import XLSX from 'xlsx'
export default {
  methods: {
    exportExcel() {
      const table = this.$refs.table.$el
      const workbook = XLSX.utils.table_to_book(table)
      XLSX.writeFile(workbook, '报表.xlsx')
    }
  }
}
</script>

以上方法覆盖了从基础到高级的表格报表需求，根据项目复杂度选择合适方案。