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' }
         ]
     }
],
相关推荐
Jonathan Star3 分钟前
跨域处理的核心是解决浏览器的“同源策略”限制,主流方案
javascript·chrome·爬虫
洛小豆6 分钟前
她问我::is-logged 是啥?我说:前面加冒号,就是 Vue 在发暗号
前端·vue.js·面试
我有一棵树12 分钟前
前端开发中 SCSS 变量与 CSS 变量的区别与实践选择,—— 两种变量别混为一谈
前端·css·scss
麦麦大数据21 分钟前
F024 CNN+vue+flask电影推荐系统vue+python+mysql+CNN实现
vue.js·python·cnn·flask·推荐算法
white-persist27 分钟前
JWT 漏洞全解析:从原理到实战
前端·网络·python·安全·web安全·网络安全·系统安全
果粒chenl1 小时前
React学习(四) --- Redux
javascript·学习·react.js
IT_陈寒1 小时前
React 性能优化:5个实战技巧让首屏加载提升50%,开发者亲测有效!
前端·人工智能·后端
rising start1 小时前
前端基础一、HTML5
前端·html·html5
Never_Satisfied1 小时前
在JavaScript / HTML中,div容器在内容过多时不显示超出的部分
开发语言·javascript·html
鬼谷中妖1 小时前
JavaScript 循环与对象:深入理解 for、for...in、for...of、不可枚举属性与可迭代对象
前端