vue3 - 给定一个结构，如何生成对应的多级表头的表格？

Question

给定一个结构，如何生成对应的多级表头的表格？

const fields = [
  {
    label: "A",
    prop: "A"
    sub: [
      {
        label: "A1",
        prop: "A1"
      },
      {
        label: "A2",
        prop: "A2"
      }
    ]
  },
  {
    label: "B",
    prop: "B",
    sub: [
      {
        label: "B1",
        prop: "B1"
      },
      {
        label: "B2",
        prop: "B2"
      }
    ]
  }
]

如果给定的是一个固定层次的嵌套结构，我们可以用两层循环完成。但是当嵌套层次不确定的话，应该怎么递归的生成呢？在vue中该怎么实现？

固定就2层嵌套结构下的实现

<script setup lang="ts">
import { ref, version as vueVersion } from 'vue'
import { version as epVersion } from 'element-plus'
import { ElementPlus } from '@element-plus/icons-vue'

const fields = [
  {
    label: "A",
    prop: "A",
    sub: [
      {
        label: "A1",
        prop: "A1"
      },
      {
        label: "A2",
        prop: "A2"
      }
    ]
  },
  {
    label: "B",
    prop: "B",
    sub: [
      {
        label: "B1",
        prop: "B1"
      },
      {
        label: "B2",
        prop: "B2"
      }
    ]
  }
]

const tableData = [
  { A1: "peter", "A2": "huan", B1: "tom", B2: "li" },
  { A1: "peter", "A2": "huan", B1: "tom", B2: "li" },
  { A1: "peter", "A2": "huan", B1: "tom", B2: "li" },
  { A1: "peter", "A2": "huan", B1: "tom", B2: "li" },
]
</script>

<template>
  <el-table :data="tableData">
    <el-table-column v-for="item in fields" :prop="item.prop" :label="item.label">
      <template v-if="item.sub">
        <el-table-column  v-for="subItem in item.sub" :prop="subItem.prop" :label="subItem.label" >
        </el-table-column>  
      </template>
      
    </el-table-column>
  </el-table>
</template>

Answer 1

看看左侧菜单栏是如何处理的，这个和那逻辑是一样的

Answer 2

把你的el-table-column逻辑封装为一个组件，组件内判断有没有sub，有的话递归调用自己

Answer 3

为了递归地生成多级表头的表格，你可以使用递归组件来处理嵌套的fields结构。在Vue中，你可以创建一个组件，该组件接受fields数组作为输入，并根据需要渲染el-table-column和嵌套的el-table-column。

以下是一个递归组件的示例，它可以根据给定的嵌套fields结构生成多级表头：

<template>
  <el-table-column
    v-if="!Array.isArray(fields)"
    :prop="fields.prop"
    :label="fields.label"
  />
  <el-table-column
    v-else
    :label="fields[0].label"
  >
    <template v-slot:header>
      <!-- 这里可以添加自定义的表头内容 -->
      <span>{{ fields[0].label }}</span>
    </template>
    <nested-table-header
      v-for="(subField, index) in fields"
      :key="index"
      :fields="subField.sub"
    />
  </el-table-column>
</template>

<script>
export default {
  name: 'NestedTableHeader',
  props: {
    fields: {
      type: [Array, Object],
      required: true,
    },
  },
};
</script>

在你的主组件中，你可以这样使用它：

<template>
  <el-table :data="tableData">
    <nested-table-header
      v-for="(field, index) in fields"
      :key="index"
      :fields="field"
    />
  </el-table>
</template>

<script>
import NestedTableHeader from './NestedTableHeader.vue';

export default {
  components: {
    NestedTableHeader,
  },
  data() {
    return {
      fields: /* ...你的fields结构... */,
      tableData: /* ...你的表格数据... */,
    };
  },
};
</script>

注意，在上面的示例中，NestedTableHeader组件检查传入的fields属性是否是数组。如果是，则递归地渲染嵌套的表头；如果不是，则直接渲染一个el-table-column。这允许你处理任意嵌套级别的表头。

请确保你的Vue版本和Element Plus版本支持上述功能，并根据需要进行调整。