想做一个表格嵌套表格的模板,如以下图片:
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, for循环, v-for循环, 表格嵌套
上面是“el-table表格嵌套v-for循环展示”的全面内容,想了解更多关于 vuejs 内容,请继续关注web建站教程。
当前网址:https://ipkd.cn/webs_2089.html
workflows工作流
- 森林里一只邪恶的树妖ComfyUI工作流
- 文生图工作流:图片合并comfyui工作流
- 1个很漂亮的单身小女孩ComfyUI工作流
- 一个穿绿衣服国风古典女孩
- 一个可爱的口袋妖怪ComfyUI工作流
- 一个男人正走进科幻的大门ComfyUI工作流
- 一条闪闪发光的金鱼ComfyUI工作流
- 一位老人安详地坐在云层中钓鱼
猜你喜欢
声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!