当前位置：首页 > VUE

vue实现表格报表

2026-02-17 16:44:08VUE

Vue 实现表格报表的方法

使用 Vue 实现表格报表可以通过原生表格、第三方组件库或自定义组件完成。以下是几种常见实现方式：

使用原生 HTML 表格

通过 Vue 的 v-for 指令动态渲染表格数据：

<template>
  <table>
    <thead>
      <tr>
        <th v-for="header in headers" :key="header">{{ header }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, index) in data" :key="index">
        <td v-for="(value, key) in row" :key="key">{{ value }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      headers: ['ID', 'Name', 'Age'],
      data: [
        { id: 1, name: 'Alice', age: 25 },
        { id: 2, name: 'Bob', age: 30 }
      ]
    }
  }
}
</script>

使用 Element UI 表格组件

安装 Element UI 后，通过 el-table 快速实现功能丰富的表格：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="Date" width="180"></el-table-column>
    <el-table-column prop="name" label="Name" width="180"></el-table-column>
    <el-table-column prop="address" label="Address"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2023-01-01',
        name: 'John',
        address: 'New York'
      }]
    }
  }
}
</script>

使用 VxeTable 高级表格

VxeTable 提供更专业的报表功能，支持复杂表头、虚拟滚动等：

<template>
  <vxe-table :data="tableData">
    <vxe-column type="seq" width="60"></vxe-column>
    <vxe-column field="name" title="Name"></vxe-column>
    <vxe-column field="role" title="Role"></vxe-column>
    <vxe-column field="age" title="Age"></vxe-column>
  </vxe-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'Alice', role: 'Developer', age: 28 }
      ]
    }
  }
}
</script>

实现导出功能

结合 xlsx 库实现 Excel 导出：

import XLSX from 'xlsx'

methods: {
  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, 'report.xlsx')
  }
}

添加分页功能

Element UI 分页示例：

<el-pagination
  @current-change="handleCurrentChange"
  :current-page="currentPage"
  :page-size="10"
  layout="total, prev, pager, next"
  :total="totalItems">
</el-pagination>