vue 表格循环多级表头

cpp 复制代码
<el-table v-loading="loading"  :data="infoList" show-summary>
	<el-table-column v-for="column in columns" :key="column.prop" :label="column.label" :prop="column.prop">
    	<el-table-column v-for="(item,index) in column.list" :key="index" :label="item.label" :prop="item.prop">
        </el-table-column>
    </el-table-column>
</el-table>

数据格式

cpp 复制代码
tableData: [
	{ 
	 institution: '石家庄',
	 entrynum:'111',
	 premium:'201',
     list:[
        {entrynum:'11',premium:'200',}
     ]
    },
],
columns: [
	{ label: '机构', prop: 'institution' },
    { label: '健康险(风险型)',
       list:[
          {label: '项目数', prop: 'entrynum' },
          {label: '保费规模', prop: 'premium' }
       ]
    },
    { label: '健康险(服务型)',
        list:[
          {label: '项目数', prop: 'entrynum' },
          {label: '保费规模', prop: 'premium' }
        ]
     },
     { label: '意外险',
         list:[
            {label: '项目数', prop: 'entrynum' },
            {label: '保费规模', prop: 'premium' }
         ]
     },
     { label: '意健险',
         list:[
           {label: '项目数', prop: 'entrynum' },
           {label: '保费规模', prop: 'premium' }
         ]
     }
],
相关推荐
Monly211 分钟前
Vue:下拉框多选影响行高
前端·javascript·vue.js
是罐装可乐3 分钟前
前端架构知识体系:Source Map 的用法和全面解析
前端·映射·前端架构·代码安全·源码地图·source-map
小桥风满袖9 分钟前
极简三分钟ES6 - ES8中对象扩展
前端·javascript
武昌库里写JAVA17 分钟前
Mac下Python3安装
java·vue.js·spring boot·sql·学习
代码的余温20 分钟前
Web服务器VS应用服务器:核心差异解析
运维·服务器·前端
一涯25 分钟前
日常小常识记录
前端
那一抹阳光多灿烂31 分钟前
CSS 编码规范
前端·css
degree52033 分钟前
CSS :has() 选择器详解:为什么它是“父选择器”?如何实现真正的容器查询?
前端·css·css3
૮・ﻌ・34 分钟前
CSS高级技巧---精灵图、字体图标、布局技巧
前端·css
昔人'35 分钟前
纯`css`固定标题并在滚动时为其添加动画
前端·css