想做一个表格嵌套表格的模板,如以下图片:
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循环展示
基础教程推荐
猜你喜欢
- javascript利用canvas实现鼠标拖拽功能 2023-12-02
- jQuery拖拽 & 弹出层 介绍与示例 2024-01-06
- 深入探讨CSS中字体元素 2022-10-16
- 如何使用linux命令行发送HTML电子邮件 2023-10-25
- 解析OpenLayers 3加载矢量地图源的问题 2023-08-11
- 基于React路由跳转的几种方式 2024-04-23
- javascript中的location用法简单介绍 2024-01-03
- javascript Three.js创建文字初体验 2023-08-12
- 一个最简单的级联下拉菜单 2024-01-06
- php – 将mySQL记录显示为HTML表格列 2023-10-27