表格嵌套表格

问题描述：点击下拉按钮，出现快照的详细信息

解决方案:

<template>
  <div class="con_warp">
    <el-table :header-cell-style="{background:'#f9f9f9'}" ref="table" :data="tableData">
      <el-table-column :index="0" width="55" stripe>
        <template slot-scope="scope">
          <el-checkbox @change="checked_change(scope.row)" v-model="scope.row.checked"></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column type="expand">
        <template slot-scope="scope">
          <div>
            <el-table ref="table" style="width: 100%;padding-top:0px" :data="scope.row.children">
              <el-table-column label="快照ID" align="center">
                <template scope="scope">{{scope.row.snapshoot_id}}</template>
              </el-table-column>
              <el-table-column label="快照名称" show-overflow-tooltip>
                <template scope="scope">{{scope.row.snapshoot_name}}</template>
              </el-table-column>
              <el-table-column label="快照大小" align="center">
                <template scope="scope">{{scope.row.snapshoot_size}}</template>
              </el-table-column>a
              <el-table-column label=" 创建日期" show-overflow-tooltip>
                <template scope="scope">{{scope.row.snapshoot_date}}</template>
              </el-table-column>
              <el-table-column label=" 已保留天数" align="center">
                <template scope="scope">{{scope.row.snapshoot_day}}</template>
              </el-table-column>
              <el-table-column label=" 操作" prop align="center">
                <template slot-scope="scope">
                  <ul class="tb_icon" style="display:flex;margin-left:30%">
                    <li @click="returnSnapShoot($event,scope.row)" class="return"></li>
                    <li @click="deleteSnapShoot($event,scope.row)" class="delete"></li>
                  </ul>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="磁盘挂载点" prop="mount_point" width="180px"></el-table-column>
      <el-table-column label="磁盘名称" prop="name"></el-table-column>
      <el-table-column label="快照数量" prop="count" align="center"></el-table-column>
      <el-table-column label="当前使用快照ID" prop="snapid" align="center"></el-table-column>
    </el-table>
  </div>
</template>

<script>

export default {
  data() {
    return {
      tableData: [
      //自己模拟的数据
        //   {
        //     mount_point: "1",
        //     name: "1",
        //     count: "1",
        //     snapid: "1",
        //     checked: false,
        //     children: [
        //       {
        //         snapshoot_id: "1",
        //         snapshoot_name: "1",
        //         snapshoot_size: "1",
        //         snapshoot_date: "1",
        //         snapshoot_day: "12"
        //       }
        //     ]
        //   },
        //   {
        //     mount_point: "1",
        //     name: "2",
        //     count: "2",
        //     snapid: "2",
        //     checked: false,
        //     children: [
        //       {
        //         snapshoot_id: "2",
        //         snapshoot_name: "2",
        //         snapshoot_size: "2",
        //         snapshoot_date: "2",
        //         snapshoot_day: "22"
        //       },
        //       {
        //         snapshoot_id: "2",
        //         snapshoot_name: "2",
        //         snapshoot_size: "2",
        //         snapshoot_date: "2",
        //         snapshoot_day: "22"
        //       }
        //     ]
        //   }
      ]
    };
  },
  computed: {},

  components: {},

  methods: {
    getSnapShoot(page) {
      this.$http
        .get("/snapshot/snapshotList", {
          params: {
            pageNum: page,
            pageSize: 10,
            uuid: "3a3433b0c3b443d6ae7e4eeef5498554"
          }
        })
        .then(({ data }) => {
          let result = data.result.datas;
          result.forEach((item, i) => {
            console.log('123',i)
            this.tableData.push({
              mount_point: item.diskMountPoint,
              name: item.volumeName,
              count: item.snapshotNum,
              snapid: item.volumeid,
              uuid: item.uuid,
              checked: false,
              children: []
            });
            let expand = item.snapShotList;
            expand.forEach(el => {
              console.log("el", el);
              this.tableData[i].children.push({
                snapshoot_name: el.snapName,
                snapshoot_size: el.size,
                snapshoot_date: el.createTime,
                snapshoot_day: el.reservedDate
              });
            });
          });
        });
    }
  },
  mounted() {
    this.getSnapShoot();
  }
};
</script

<style lang="stylus" scoped>
.con_warp
  flex: 1
  padding: 0 25px
  background: #F0F3F4
  display: flex
  flex-direction: column
  .return
    width: 20px
    height: 20px
    float: left
    margin-top: 22px
    background: url('../../assets/images/virtua-return.png') no-repeat
    &:hover
      background: url('../../assets/images/virtua-return-light.png') no-repeat
  .delete
    width: 20px
    height: 20px
    float: right
    margin-top: 22px
    background: url('../../assets/images/virtua-delete.png') no-repeat
    &:hover
      background: url('../../assets/images/virtua-delete-activa.png') no-repeat
</style>