想做一个表格嵌套表格的模板,如以下图片:
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循环展示
猜你喜欢
- 跨浏览器开发经验总结(四) 怎么写入剪贴板 2023-11-30
- history相关属性 2024-12-07
- Ajax报错400的参考解决办法 2023-02-23
- JS实现羊了个羊小游戏实例 2024-01-04
- highlight.js如何显示行号,增加行号显示 2023-08-29
- Vue中的前后台交互 2023-10-08
- PC端和移动端自适应问题的快速解决方法 2024-02-20
- 轩辕剑外传:云之遥 主线流程攻略(全) 2024-02-05
- IE7、IE8、ff下的margin-top问题 折叠margin 2024-01-04
- 纯js和css实现渐变色包括静态渐变和动态渐变 2024-02-07