实现动态的多级表头

最新推荐文章于 2024-08-25 15:15:24 发布

sly _ sly

最新推荐文章于 2024-08-25 15:15:24 发布

阅读量641

点赞数

文章标签： vue.js javascript

原文链接：https://blog.csdn.net/qq_36539696/article/details/122243855

版权

  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>


原文链接：https://blog.csdn.net/qq_36539696/article/details/122243855