想做一个表格嵌套表格的模板,如以下图片:

1、template代码如下:
<el-table
:data="listData"
border
v-loading="dataLoading"
:header-cell-style="{
background: '#00C0EF',
color: '#fff',
padding: '2px 0'
}"
style="width: 100%"
>
<el-table-column
prop="area"
label="区域"
show-overflow-tooltip
min-width="70"
>
</el-table-column>
<el-table-column
prop="name"
label="省份"
show-overflow-tooltip
min-width="70"
>
</el-table-column>
<el-table-column
v-for="(item, index) in listDataMonths"
:key="index"
:label="item"
align="center"
>
<el-table-column label="人口" min-width="70" align="center">
<template slot-scope="scope">
{{ scope.row.list[index].money }}
</template>
</el-table-column>
<el-table-column label="地区" min-width="70" align="center">
<template slot-scope="scope">
{{ scope.row.list[index].state }}
</template>
</el-table-column>
</el-table-column>
<el-table-column prop="total" label="GDP" min-width="70"></el-table-column>
</el-table>
2、js代码如下:
data() {
return {
dataLoading: false,
listData: [
{
area: "华北区",
name: "浙江省",
total: "3221",
list: [
{
month: "202201",
money: "2211",
state: "杭州市"
},
{
month: "202202",
money: "1421",
state: "宁波市"
},
{
month: "202203",
money: "1332",
state: "温州市"
}
]
},
{
area: "东南区",
name: "广东省",
total: "3211",
list: [
{
month: "202201",
money: "5444",
state: "广州市"
},
{
month: "202202",
money: "3211",
state: "深圳市"
},
{
month: "202203",
money: "2211",
state: "珠海市"
}
]
},
{
area: "东北区",
name: "黑龙江",
total: "3211",
list: [
{
month: "202201",
money: "5444",
state: "哈尔滨市"
},
{
month: "202202",
money: "3211",
state: "齐齐哈尔"
},
{
month: "202203",
money: "2211",
state: "鸡西市"
}
]
}
],
listDataMonths: ["202201","202202","202203"] //把listData里面的日期遍历出来
};
以上是编程学习网小编为您介绍的“el-table表格嵌套v-for循环展示”的全面内容,想了解更多关于 vuejs 内容,请继续关注编程基础学习网。
编程基础网
本文标题为:el-table表格嵌套v-for循环展示
基础教程推荐
猜你喜欢
- ajax动态赋值echarts的实例(饼图和柱形图) 2023-02-14
- 使用JS location实现搜索框历史记录功能 2023-11-30
- android-SQLite代码段功能实现未在TextView中将文本格式设置为HTML 2023-10-26
- css3动画效果抖动解决方法 2023-12-19
- 杏林同学录(二) 2024-02-07
- js实现随机数小游戏 2023-12-19
- Canvas生成海报文字居中 2022-10-30
- layui解决element树形表格全选失效,刷新保持原数据选中 2022-10-20
- html+css实现血轮眼轮回眼特效代码 2022-09-20
- 两种方法实现用CSS切割图片只取图片中一部分 2023-12-08
