el-table 多级表头

1.结构

复制代码
<el-table
        :data="tableData"
        border
        :height="700"
        style="width: 100% !important; overflow: auto"
        :header-cell-style="{ background: '#becee1', color: '#333' }"
        :cell-style="{ padding: '5px' }"
      >
        <template v-for="item in tableHeader">
          <template v-if="item.children && item.children.length > 0">
            <el-table-column
              :key="item.id"
              :label="item.label"
              :prop="item.label"
              align="center"
            >
              <span v-for="subItem in item.children" :key="subItem.id">
                <el-table-column
                  :label="subItem.label"
                  :prop="subItem.prop"
                  align="center"
                ></el-table-column>
              </span>
            </el-table-column>
          </template>
          <el-table-column
            v-else
            :key="item.id"
            :label="item.label"
            :prop="item.prop"
            align="center"
          ></el-table-column>
        </template>
      </el-table>

2.数据

复制代码
tableData: [
        {
          fenju: "杨浦分局",
          tianxie: "已填写",
          prop11: "11",
          prop12: "12",
          prop21: "21",
          prop22: "22",
          prop31: "31",
          prop32: "32"
        },
        {
          fenju: "长宁分局",
          tianxie: "未填写",
          prop11: "11",
          prop12: "12",
          prop21: "21",
          prop22: "22",
          prop31: "31",
          prop32: "32"
        }
      ],
      tableHeader: [
        {
          label: "分局",
          prop: "fenju"
        },
        {
          label: "填写情况",
          prop: "tianxie"
        },
        {
          id: 1,
          label: "考核组1",
          prop: "",
          children: [
            {
              id: 11,
              label: "考核项1",
              prop: "prop11"
            },
            {
              id: 12,
              label: "考核项2",
              prop: "prop12"
            }
          ]
        },
        {
          id: 2,
          label: "考核组2",
          prop: "",
          children: [
            {
              id: 21,
              label: "考核项1",
              prop: "prop21"
            },
            {
              id: 22,
              label: "考核项2",
              prop: "prop22"
            }
          ]
        },
        {
          id: 3,
          label: "考核组3",
          prop: "",
          children: [
            {
              id: 11,
              label: "考核项1",
              prop: "prop31"
            },
            {
              id: 12,
              label: "考核项2",
              prop: "prop32"
            }
          ]
        }
      ]
相关推荐
F2E_Zhangmo7 分钟前
基于cornerstone3D的dicom影像浏览器 第五章 在Displayer四个角落显示信息
开发语言·前端·javascript
小浣熊喜欢揍臭臭41 分钟前
react+umi项目如何添加electron的功能
javascript·electron·react
乖女子@@@1 小时前
React笔记_组件之间进行数据传递
javascript·笔记·react.js
F2E_Zhangmo1 小时前
基于cornerstone3D的dicom影像浏览器 第二章 加载本地文件夹中的dicom文件并归档
前端·javascript·css
念念不忘 必有回响1 小时前
js设计模式-装饰器模式
javascript·设计模式·装饰器模式
weixin_584121432 小时前
vue3+ts导出PDF
javascript·vue.js·pdf
尚学教辅学习资料2 小时前
Ruoyi-vue-plus-5.x第五篇Spring框架核心技术:5.1 Spring Boot自动配置
vue.js·spring boot·spring
给月亮点灯|2 小时前
Vue基础知识-脚手架开发-使用Axios发送异步请求+代理服务器解决前后端分离项目的跨域问题
前端·javascript·vue.js
叫我阿柒啊2 小时前
从Java全栈到前端框架:一次真实的面试对话与技术解析
java·javascript·typescript·vue·springboot·react·前端开发
@CLoudbays_Martin113 小时前
为什么动态视频业务内容不可以被CDN静态缓存?
java·运维·服务器·javascript·网络·python·php