|
最近在工作中遇到一个需求，有关element-ui table表格每一行展开并调用后端接口显示表格数据，看了一下官网api，关于展开是静态的，也就是说要把展开的数据拼在接口返回的data中，但是我们是要动态获取数据。。。对于这方面的需求开始研究了一下，看到有个大佬有关这方面的需求的博客，但是在实际开发中又遇到了一个很棘手的bug，于是。。。我解决了这个问题。。。废话不多说请看代码。。。
下面是需求相关：
接下来就是代码实现：
![]()
export default{
data(){
return{
expands:[],//展开table相关
getRowKeys (row,index) { //设置row-key只展示一行
return row.goodsId
},
}
},
methods:{
// 展开触发api
expandChange(row, expandedRows){
this.listQuery.goodsId=row.goodsId
//加载前先将上次的数据模型清空，
// 不然会出现点击展开嵌套表格后，先显示上一次的数据，然后渲染这次的数据。
this.tblData = [];
//只展开一行
if (expandedRows.length) {//说明展开了
this.expands = [];
if (row) {
this.expands.push(row.goodsId);//只展开当前行id
}
// 获取展开行的表格数据
this.GetExpendRowData()
} else {//说明收起了
this.expands = [];
}
},
// 获取展开行的表格数据
GetExpendRowData(){
//掉接口
getExpendRowList().then(res=>{
//由于上面把this.tblData清空了，所以下面直接进行数组赋值会出现一个问题
//问题是数据已经打印出来了，但是试图没有更新
//接口请求后的数据不可直接赋值，例如：this.tblData=res.data,这样是错位的
})
}
}
|