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' }
         ]
     }
],
相关推荐
余生H12 分钟前
Angular v19 (二):响应式当红实现signal的详细介绍:它擅长做什么、不能做什么?以及与vue、svelte、react等框架的响应式实现对比
前端·vue.js·react.js·angular.js
聚宝盆_23 分钟前
【记录:前端提高用户体验】
前端·css
GISer_Jing1 小时前
Vue前端进阶面试题(六)
前端·javascript·vue.js
YueiL1 小时前
数据结构每日一题|判断链表是否有环型结构
javascript·数据结构·链表
之诚1 小时前
使用Gradle编译前端的项目
前端·vue·gradle
FenceRain1 小时前
uniapp 扩展picker-view实现条件查询
前端·javascript·uni-app
喵喵酱仔__1 小时前
uniapp echarts tooltip formation 不识别html
前端·javascript·echarts
new出一个对象1 小时前
uniapp在App端定义全局弹窗,当打开关闭弹窗会触发onShow、onHide生命周期怎么解决?
前端·uni-app
EterNity_TiMe_2 小时前
【论文复现】上下位关系自动检测方法
前端·javascript·网络·人工智能·前端框架·easyui
天农学子2 小时前
Easyui 实现订单拆分开票功能
前端·javascript·easyui