想做一个表格嵌套表格的模板,如以下图片:
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循环展示


基础教程推荐
猜你喜欢
- 怎么用驱动精灵安装网卡驱动以及驱动精灵如何更新网卡驱动? 2024-01-23
- 详解微信小程序胶囊按钮返回|首页自定义导航栏功能 2023-12-21
- 通过手写instanceof理解原型链示例详解 2023-08-08
- Ajax实现无闪烁定时刷新页面实例代码 2022-12-28
- vuejs教程 笔记(一) 2023-10-08
- 左边固定宽右边自适应的6种方法 2023-12-11
- Ajax+js实现异步交互 2022-12-18
- ajax文件上传成功 解决浏览器兼容问题 2022-12-28
- 使用CSS3制作响应式导航菜单的方法 2024-01-25
- 组合CLASS来完成网页布局风格 2022-10-16