Vue2+Element-UI 表格组件实现动态多级表头

Element-UI 表格组件实现动态多级表头

需求背景

在实际项目中，经常遇到需要展示复杂多级表头的表格，而且表头结构可能需要根据后端配置动态变化。本文将介绍如何使用 Element-UI 的表格组件实现动态多级表头功能。

效果展示

实现了以下功能：

1. 支持最多三级表头结构
2. 表头配置完全由后端控制
3. 支持不同层级的列配置
4. 数据字段与表头自动映射

核心代码

<template>
  <div>
    <!-- 
      el-table组件：
      :data - 表格数据源
      border - 显示边框
      width - 表格宽度100%铺满容器
    -->
    <el-table :data="tableData" border style="width: 100%">
      <!-- 遍历表头配置，渲染多级表头 -->
      <template v-for="(column, index) in tableColumns">
        <!-- 
          第一级表头列：
          :key - 循环的唯一标识
          :label - 列标题
          :prop - 对应数据字段名
          :align - 对齐方式，从后端配置获取
        -->
        <el-table-column
          :key="index"
          :label="column.label"
          :prop="column.prop"
          :align="column.align"
        >
          <!-- 如果存在子列，则递归渲染子列 -->
          <template v-if="column.children && column.children.length">
            <!-- 第二级表头列 -->
            <el-table-column
              v-for="(subColumn, subIndex) in column.children"
              :key="subIndex"
              :label="subColumn.label"
              :prop="subColumn.prop"
            >
              <!-- 如果二级列存在子列，继续渲染第三级 -->
              <template v-if="subColumn.children && subColumn.children.length">
                <!-- 第三级表头列 -->
                <el-table-column
                  v-for="(thirdColumn, thirdIndex) in subColumn.children"
                  :key="thirdIndex"
                  :label="thirdColumn.label"
                  :prop="thirdColumn.prop"
                >
                </el-table-column>
              </template>
            </el-table-column>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], // 表格数据数组
      tableColumns: [], // 表头配置数组
    };
  },
  created() {
    // 组件创建时获取数据
    this.fetchData();
  },
  methods: {
    // 获取表格数据和表头配置
    async fetchData() {
      const response = await this.getMockData();
      this.tableColumns = response.columns; // 设置表头配置
      this.tableData = response.data; // 设置表格数据
    },
    // 模拟后端接口
    async getMockData() {
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve({
            // 表头配置数据结构
            columns: [
              // 基础列配置
              { 
                label: "公司名称", // 列标题
                prop: "companyName" // 对应数据字段名
              },
              { label: "公司类型", prop: "companyType" },
              { label: "融资平台所属企业名称", prop: "financingPlatform" },
              { label: "中标/牵头机构", prop: "leadInstitution" },
              // 多级表头配置 - 资产
              {
                label: "资产",
                align: "center", // 对齐方式
                children: [ // 子列配置
                  { label: "合计", prop: "assetTotal" },
                  { label: "公益性资产", prop: "publicAsset" },
                  { label: "非公益性资产", prop: "nonPublicAsset" },
                ],
              },
              // 多级表头配置 - 负债
              {
                label: "负债",
                align: "center",
                children: [
                  { label: "合计", prop: "liabilityTotal" },
                  {
                    label: "其中",
                    children: [ // 三级表头配置
                      { label: "贷款（有息负债）", prop: "loan" },
                      { label: "隐性债务余额", prop: "hiddenDebt" },
                    ],
                  },
                ],
              },
              { label: "资产负债率", prop: "debtRatio" },
              // 多级表头配置 - 收入
              {
                label: "收入",
                align: "center",
                children: [
                  { label: "合计", prop: "revenueTotal" },
                  {
                    label: "其中",
                    children: [
                      { label: "主营业务收入", prop: "mainRevenue" },
                    ],
                  },
                ],
              },
              // 多级表头配置 - 利润
              {
                label: "利润",
                align: "center",
                children: [
                  { label: "净利润", prop: "netProfit" },
                  { label: "主营业务利润", prop: "profitTotal" },
                ],
              },
              // 多级表头配置 - 税收情况
              {
                label: "缴纳税收情况",
                align: "center",
                children: [
                  {
                    label: "合计",
                    prop: "totalTax",
                  },
                  {
                    label: "其中",
                    children: [
                      { label: "增值税", prop: "vat" },
                      { label: "企业所得税", prop: "incomeTax" },
                      { label: "其他税收", prop: "otherTax" },
                    ],
                  },
                ],
              },
            ],
            // 表格数据结构
            data: [
              {
                // 每个字段对应表头配置中的prop值
                companyName: "测试公司A",
                companyType: "国有企业",
                financingPlatform: "融资平台A",
                leadInstitution: "机构A",
                assetTotal: "1000",
                publicAsset: "600",
                nonPublicAsset: "400",
                liabilityTotal: "800",
                loan: "300",
                hiddenDebt: "200",
                debtRatio: "80%",
                revenueTotal: "500",
                mainRevenue: "400",
                subsidy: "100",
                netProfit: "200",
                profitTotal: "250",
                vat: "50",
                incomeTax: "30",
                otherTax: "20",
              },
              // 更多数据行...
            ],
          });
        }, 1000); // 模拟1秒网络延迟
      });
    },
  },
};
</script>

<style scoped>
/* 表格上方留出间距 */
.el-table {
  margin-top: 20px;
}
</style>

实现要点

1. 递归渲染

   • 使用 v-if 和 v-for 组合实现递归渲染表头
   • 通过 children 属性判断是否存在子级

2. 数据映射

   • 表头的 prop 属性与数据对象的字段一一对应
   • 支持任意层级的数据读取

3. 样式控制

   • 通过 align 属性控制对齐方式
   • 可以针对不同层级设置不同样式

优势特点

1. 灵活性强：表头结构完全由后端控制，前端无需修改代码
2. 易维护：配置化的方式，减少硬编码
3. 扩展性好：可以轻松添加新的配置项

注意事项

1. 建议限制表头最大层级，过多层级可能影响用户体验
2. 注意数据字段的唯一性，避免重复的 prop 值
3. 表格宽度建议根据实际内容自适应

总结

这种实现方式既满足了复杂的业务需求，又保持了代码的简洁性和可维护性。通过后端配置的方式，可以灵活地处理各种表格展示需求，是一个很好的解决方案。

这个帖子包含了完整的实现思路、代码示例和注意事项，您可以根据需要进行修改或补充。