Vue 中 Element UI 的 el-table 组件实现动态表头和内容

在 Vue 中使用 Element UI 的 el-table 组件时，为了实现动态表头（包括第一层表头及其下的嵌套表头或子表头）。需要后端返回的数据结构能够体现表头层级关系以及对应的数据结构相匹配。这样的数据通常是一个嵌套数组，每个表头单元可能包含自身的列信息以及它的子表头和相关数据。

<template>
  <el-table :data="tableData">
    <el-table-column v-for="(header, index) in headers" :key="index" :label="header.title" :props="header.key || null">
      <el-table-column v-if="header.children" v-for="(subHeader, subIndex) in header.children" :key="`${index}-${subIndex}`" :label="subHeader.title" :props="subHeader.key">
        <!-- 显示子表头对应的数据 -->
        <template slot-scope="{ row }">
          {
   {
    row[subHeader.key] }}
        </template>
        <!-- 如果还有更深的层级，继续递归 -->
        <!-- ... -->
      </el-table-column>
      <!-- 对于没有子表头的一级列，直接显示数据 -->
      <template slot-scope="{ row }" v-else>
        {
   {
    row[header.key] }}
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
   
  data() {
   
    return {
   
      tableData: [  
        {
   
          "field1_1": "数据项1-1",
          "field1_2_1": "数据项1-2-1",
          "field1_2_2": "数据项1-2-2",
          "field2": "数据项2"
        },
      ],
      headers: [  
        {
   
          "title": "一级表头1",
          children: [
            {
   
              "title": "二级表头1-1",
              "key": "field1_1"
            },
            {
   
              "title": "二级表头1-2",
              "children": [
                {
   
                  "title": "三级表头1-2-1",
                  "key": "field1_2_1"
                },
                {
   
                  "title": "三级表头1-2-2",
                  "key": "field1_2_2"
                }
              ]
            }
          ]
        },
        {
   
          "title": "一级表头2",
          "key": "field2"
        }
      ],
    };
  },
  created() {
   

  },
};
</script>