使用el-table自带的树形结构就可以展开列表，而展开显示的内容是同时从后台取出来的同一条数据字段，如果要在展开的内容里展示一个列表，只需要在后台查询的时候封装一个list在数据里面就好了，类似于List<User>,而User里面有个字段是List型的，前端table展开内容写成:
<el-table :data="table1" border>
<el-table-column type="expand">
<template slot-scope="props">
<el-table :data="props.row.table2" border>
</el-table></template></el-table-column></el-table>
但是这不是我想要的效果，我希望在展开的时候去实时获取这行数据下对应的列表或者子集什么的，以下是我的实现方式：
<el-table
:data="table1"
:row-key="getRowKeys"
:expand-row-keys="expands"
v-loading="listLoading"
border
@cell-mouse-enter="mouseOver"
@expand-change="expand"
style="width: 100%">
<el-table-column type="expand">
<template slot-scope="props">
<el-table :data="props.row.table2" border>
<el-table-column prop="name" label="名称">
<el-table-column prop="description" label="描述" show-overflow-tooltip>
</el-table>
</template>
</el-table-column>
<el-table>
script如下：
<script>
export default {
filters:{},
data() {
return {
list: null,
total: null,
listLoading: false,
// 获取row的key值
getRowKeys(row) {
return row.id;
},
expands:[],
}
},
methods: {
mouseOver(row){
if(row.table2.length>0){
return false;
}
const that = this;
let refId = row.id;
let list = this.table1;
this.$api.后台js.findByRefId(refId).then(resp=>{
that.table2 = resp;
for (let i = 0; i < list.length; i++) {
if(list[i].id==taskId){
list[i].table2 = resp;
}
}
that.table1 = list;
console.log(that.table1)
});
},
expand(row,expandedRows){
return;
},
getList(){
}
},
created() {
this.getList()
}
}
</script>
效果如下：
感谢阅读。
