问题描述：点击下拉按钮，出现快照的详细信息 解决方案:
<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>