web建站教程
  1. 首页
  2. vuejs
  3. js
  4. 好玩
  5. seo教程
  6. 前端知识
  7. 百度echarts
  8. 更多
    php入门
    nodejs
    mockjs
    reactjs
    mysql
    wordpress
    织梦cms
    帝国cms
    git教程
    IT知识
    模板大全
    休息站

el-table表格嵌套v-for循环展示

1445 ℃
           

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

el-table表格嵌套v-for循环展示

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合并行的通用方法(附js代码)

el-table利用:row-style="rowClass"设置指定行变色

JavaScript有哪些方法可以快速遍历出想要的数据

el-table表格显示selection多选时对某些复选框设置禁止选中

el-table表格实现多选功能(全选/指定选中/取消选中)

标签: el-table, for循环, v-for循环, 表格嵌套

上面是“el-table表格嵌套v-for循环展示”的全面内容,想了解更多关于 vuejs 内容,请继续关注web建站教程。

当前网址:https://ipkd.cn/webs_2089.html

声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!

当前位置: 网站首页 > vuejs
本文共计1546个字,预计阅读时长11分钟
生活小工具,收录了80多款小工具
上一篇: 推荐一款免费可商用英文字体——Atkinson Hyperlegible
下一篇: 推荐一款免费好看的中文设计字体——字体传奇特战体
x 打工人ai神器