3分钟上手！Element UI Table组件高效生成数据报表指南

2026-02-05 05:00:18作者：凤尚柏Louis

你还在为手动编写数据报表而烦恼吗？还在为表格样式调整花费数小时吗？本文将带你快速掌握Element UI Table组件的使用方法，无需复杂代码，零基础也能在3分钟内生成专业的数据报表。读完本文，你将学会表格的基础配置、数据展示、样式美化以及高级功能应用，让数据可视化变得简单高效。

关于Element UI Table组件

Element UI是一套基于Vue.js 2.0的桌面端组件库，其中Table（表格）组件是数据展示和报表生成的核心工具。它提供了丰富的功能，如排序、筛选、分页、单元格合并等，满足各种数据展示需求。Table组件的源码位于packages/table/目录下，主要实现文件为packages/table/src/table.vue。

Table组件的核心特点

灵活的数据绑定：支持数组数据直接绑定，自动渲染表格
丰富的交互功能：排序、筛选、分页、行展开等
自定义样式：支持自定义单元格样式、行样式，满足个性化需求
高性能：支持大数据量展示，虚拟滚动优化

快速上手：基础表格实现

引入Element UI

首先，需要在项目中引入Element UI。推荐使用国内CDN加速，确保访问速度：

<!-- 引入Element UI样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/theme-chalk/index.css">
<!-- 引入Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<!-- 引入Element UI组件库 -->
<script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/index.js"></script>

基础表格代码示例

以下是一个最简单的表格实现，只需几行代码即可展示数据：

<div id="app">
  <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>
</div>

<script>
  new Vue({
    el: '#app',
    data() {
      return {
        tableData: [
          {
            date: '2023-05-01',
            name: '张三',
            address: '北京市海淀区'
          },
          {
            date: '2023-05-02',
            name: '李四',
            address: '上海市浦东新区'
          },
          {
            date: '2023-05-03',
            name: '王五',
            address: '广州市天河区'
          }
        ]
      };
    }
  });
</script>

这段代码会生成一个包含日期、姓名和地址三列的表格，数据自动填充并展示。

表格样式美化

基础样式调整

Element UI Table组件提供了多种内置样式，通过简单的属性设置即可实现。例如，设置条纹表格、边框表格：

<el-table :data="tableData" stripe border style="width: 100%">
  <!-- 列定义 -->
</el-table>

stripe：开启条纹表格效果
border：显示表格边框

自定义行样式

通过row-class-name属性可以为表格行添加自定义类名，结合CSS实现个性化样式。例如，为不同状态的行设置不同背景色：

<el-table :data="tableData" :row-class-name="tableRowClassName" style="width: 100%">
  <!-- 列定义 -->
</el-table>

<style>
  .el-table .warning-row {
    background: oldlace;
  }
  .el-table .success-row {
    background: #f0f9eb;
  }
</style>

<script>
  new Vue({
    methods: {
      tableRowClassName({row, rowIndex}) {
        if (rowIndex % 3 === 0) {
          return 'warning-row';
        } else if (rowIndex % 3 === 1) {
          return 'success-row';
        }
        return '';
      }
    }
  });
</script>

上述代码中，我们定义了两种行样式：warning-row和success-row，并通过tableRowClassName方法为不同行索引的行应用不同的样式类。相关的样式定义可以参考examples/demo-styles/table.scss文件。

高级功能：数据报表生成

数据筛选与排序

Table组件内置了排序和筛选功能，只需简单配置即可实现：

<el-table :data="tableData" style="width: 100%">
  <el-table-column prop="date" label="日期" sortable 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-column prop="amount" label="金额" sortable :filters="[{text: '大于1000', value: 1000}]" :filter-method="filterHandler"></el-table-column>
</el-table>

<script>
  new Vue({
    methods: {
      filterHandler(value, row) {
        return row.amount > value;
      }
    }
  });
</script>

sortable：开启列排序功能
filters：定义筛选条件
filter-method：自定义筛选方法

数据汇总与统计

对于报表需求，常常需要对数据进行汇总统计。Table组件的show-summary属性可以快速实现合计行功能：

<el-table :data="tableData" show-summary 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="金额" summary-method="sumAmount"></el-table-column>
</el-table>

<script>
  new Vue({
    methods: {
      sumAmount(param) {
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计';
            return;
          }
          const values = data.map(item => Number(item[column.property]));
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
        });
        return sums;
      }
    }
  });
</script>

show-summary：开启合计行
summary-method：自定义合计方法，实现复杂的统计逻辑

导出报表数据

虽然Element UI Table组件本身不提供导出功能，但可以结合第三方库如xlsx.js实现数据导出。以下是一个简单的导出Excel示例：

<el-button @click="exportExcel">导出Excel</el-button>
<el-table :data="tableData" ref="table" style="width: 100%">
  <!-- 列定义 -->
</el-table>

<script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>
<script>
  new Vue({
    methods: {
      exportExcel() {
        // 获取表格数据
        const data = this.tableData.map(row => {
          return {
            '日期': row.date,
            '姓名': row.name,
            '地址': row.address,
            '金额': row.amount
          };
        });
        
        // 创建工作簿和工作表
        const ws = XLSX.utils.json_to_sheet(data);
        const wb = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(wb, ws, "报表数据");
        
        // 导出文件
        XLSX.writeFile(wb, "数据报表.xlsx");
      }
    }
  });
</script>

实际应用案例

销售数据报表

以下是一个完整的销售数据报表示例，包含数据展示、筛选、排序和合计功能：

<div id="app">
  <el-table :data="salesData" show-summary stripe border style="width: 100%">
    <el-table-column prop="date" label="日期" sortable width="180"></el-table-column>
    <el-table-column prop="product" label="产品名称" width="180"></el-table-column>
    <el-table-column prop="region" label="地区" :filters="regionFilters" :filter-method="filterRegion"></el-table-column>
    <el-table-column prop="sales" label="销售额" sortable></el-table-column>
    <el-table-column prop="profit" label="利润" sortable></el-table-column>
  </el-table>
</div>

<script>
  new Vue({
    el: '#app',
    data() {
      return {
        salesData: [
          { date: '2023-01', product: '产品A', region: '华北', sales: 12000, profit: 3600 },
          { date: '2023-01', product: '产品B', region: '华南', sales: 15000, profit: 4500 },
          { date: '2023-02', product: '产品A', region: '华北', sales: 13000, profit: 3900 },
          { date: '2023-02', product: '产品B', region: '华南', sales: 16000, profit: 4800 },
          // 更多数据...
        ],
        regionFilters: [
          { text: '华北', value: '华北' },
          { text: '华南', value: '华南' },
          { text: '华东', value: '华东' }
        ]
      };
    },
    methods: {
      filterRegion(value, row) {
        return row.region === value;
      }
    }
  });
</script>