element表格怎么实现动态的多级表头

刚好遇到这样的业务,顺便记录下
官方案例里给的是静态多级表头,表述的很清楚,多级表头其实是column的嵌套,你想多少级就嵌套多少层
动态多级表头那就用变量赋值循环column即可
多级的本质和导航菜单的思路一模一样,小伙伴们可以去看下导航菜单的逻辑

首先是定义表头,

      tableColumn: [
        {
          id: 2,
          name: "一级表头",
          prop: "date",
          type: "",
        },
        {
          id: 3,
          name: "一级表头",
          prop: "",
          type: "",
          children: [
            {
              id: 31,
              name: "二级表头",
              prop: "getInpop",
              type: "",
            },
          ],
        },
        {
          id: 4,
          name: "一级表头",
          prop: "",
          children: [
            {
              id: 41,
              name: "二级表头",
              prop: "getInpop",
              type: "",
            },
          ],
        },
      ],

表头结构前后端都可以定义,如果你想完全前后端分离,为了后期方便,那么表头最好是由后端定义

定义好表头后,开始循环体现

<template v-for="(item, index) in tableColumn">
            <!-- 一级表头 -->
            <el-table-column
              v-if="item.children"
              width="180"
              align="center"
              :index="item.id"
              :key="index"
              :prop="item.prop"
              :label="item.name"
            >
              <!-- 二级表头 -->
              <template v-for="(item_child, index1) in item.children">
                <el-table-column
                  v-if="item_child.children"
                  :index="item_child.id"
                  :key="index1"
                ></el-table-column>
                <el-table-column
                  v-else
                  :label="item_child.name"
                  :index="item_child.id"
                  :key="index1"
                  align="center"
                  :type="item_child.type"
                  :prop="item_child.prop"
                ></el-table-column>
              </template>
            </el-table-column>
            <el-table-column
              v-else
              :label="item.name"
              :index="item.id"
              :key="index"
              align="center"
              :type="item.type"
              :prop="item.prop"
            >
            </el-table-column>
          </template>

如果你想级数更多,结构往下同理即可
这种定义方式用起来非常舒服,包括只有一级表头的表格,也建议这样做
需要注意的一点是,在做if判断时,后面必须要跟else,否则表格会错,因为结构没对

包括绑定事件都可以自定义
有不明白的地方可以留言,我看到会回复
如果觉得本文对你有帮助的话,麻烦给本文点个赞,是对我最大的支持