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://m.ipkd.cn/webs_2089.html

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