解决element-ui table expend扩展里边需要请求表格数据第一次不渲染的问题(之前的不好用,已更新新方法)
Posted on 2020-07-23 11:44 凡凡0410 阅读(2077) 评论(0) 编辑 收藏 举报原因:通过打印,发现,直接使用expend的 @expand-change 事件的时候,展开之后,才会进行表格数据的请求,这是导致数据不能够进行正常渲染的原因
<el-table :data="bussinessLists" class="m-r-t-10"
:expand-row-keys="expands" @expand-change="expandChangeFn"> <el-table-column type="expand" >
<template slot-scope="{row}">
{{detailInfo[row.id]}}
</template>
</el-table-column> </el-table>
:expand-row-keys:展开的行的key值得集合
@expand-change 展开或者关闭的事件
关键:手动的添加展开的列的id集合,使用$set对数据进行强制刷新,在更新列表的时候,对detailInfo进行清空,
data(){
return {
expands:[], //展开行的key的集合
detailInfo:{}
}
},
methods:{
expandChangeFn(row,expandedRows){ if (this.expands.includes(row.id)) {
//已经展开的话,就关闭,移除在expands中的key this.expands = this.expands.filter(val => val !== row.id); } else { this.getDetailFn(row.id).then(()=>{
this.$set(this.detailInfo,id,this.detailInfo[id]);
this.expands.push(row.id);
});
};
},
//异步请求接口
async getDetailFn(id){
let res = await xxxxx({id:id});
this.detailInfo[id] = res.data;
}
}
完美方式 :