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