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

这篇具有很好参考价值的文章主要介绍了Vue 中 Element UI 的 el-table 组件实现动态表头和内容。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

<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>