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表格嵌套v-for循环展示”的全面内容，想了解更多关于 vuejs 内容，请继续关注编程基础学习网。