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

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利用:row-style="rowClass"设置指定行变色
el-table表格显示selection多选时对某些复选框设置禁止选中
el-table表格实现多选功能(全选/指定选中/取消选中)
上面是“el-table表格嵌套v-for循环展示”的全面内容,想了解更多关于 vuejs 内容,请继续关注web建站教程。
当前网址:https://ipkd.cn/webs_2089.html
workflows工作流
一只沮丧的卡通小丑鱼ComfyUI工作流
《翅膀之王:鸡的团契》海报ComfyUI工作流
哈利波特魔法ComfyUI工作流
沙漠里美丽的图阿雷格女孩ComfyUI工作流
一个港口配备了小型船只、起重机、集装箱和码头
完整海报生成comfyui工作流
一位穿着优雅银色装饰黑色连衣裙的苗条模特
蘑菇屋,梦幻家园comfyui工作流
猜你喜欢
声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!

jquery做一个漂亮挂墙动态时钟
js实现下雪特效
一个包含老黄历、佛历、道历、星宿等数据的日历网站
canvas经线动画走到效果
HTML5 Canvas 刻度尺
html5如何3D立方体旋转特效
barcode条形码/qrcode二维码兼容所有浏览器(含ie6/ie7/ie8)











