最近在工作中遇到一个需求,有关element-ui table表格每一行展开并调用后端接口显示表格数据,看了一下官网api,关于展开是静态的,也就是说要把展开的数据拼在接口返回的data中,但是我们是要动态获取数据。。。对于这方面的需求开始研究了一下,看到有个大佬有关这方面的需求的博客,但是在实际开发中又遇到了一个很棘手的bug,于是。。。我解决了这个问题。。。废话不多说请看代码。。。
下面是需求相关:
接下来就是代码实现:
<template>
<div>
<el-table
ref="multipleTable"
:data="newDataList"
tooltip-effect="dark"
@selection-change="handleSelectionChange"
style="width: 100%"
empty-text="暂无数据"
:header-cell-style="{ background: '#FAFAFA', color: '#333333' }"
class="tableStyle"
v-loading="tbLoading"
@expand-change="expandChange"//这个是展开触发的api
:row-key='getRowKeys'//要绑定的key,防止展开的数据重复
:expand-row-keys="expands"//用来储存当前已点击过的id值的数组>
<el-table-column type="expand" label="查看货品" width="80">
<!--查看货品表格--下面的表格就是封装的表格组件 -->
<template>
<table-tem
:tblData="tblData"
:column="column"
:isSelect="false"
></table-tem>
</template>
</el-table-column>
<el-table-column header-align="center" align="center" prop="goodsImg" label="图片" min-width="80">
<template slot-scope="scope">
<img :src="scope.row.goodsImg" width="50px" height="50px" />
</template>
</el-table-column>
<el-table-column header-align="center" align="center" prop="stockNum" label="库存" min-width="90"></el-table-column>
</el-table>
</div>
</template>
<script>
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,这样是错位的
})
}
}
</script>