Vue Element-Plus
1.el-table 展开行时,删除或更新展开行中的数据,展开行自动合闭的问题
添加属性:row-key ,通过展开事件去更新子项数据
属性:expand-row-keys ,控制展开行,bossID 数组形式
<el-table v-loading="formUI.loading" :data="settleData" size="small" height="calc(100vh - 200px)" highlight-current-row style="width: 100%" ref="tzjtable" show-summary :summary-method="getSummaries" row-key="bossID" :expand-row-keys="expandRowKeys" @@expand-change="onExpandRow"> <el-table-column type="expand"> <template #default="props"> <div style="padding-left:50px;margin-bottom:16px;">
onExpandRow(row, expandedRows) { var _thisVue = this; if (expandedRows.length > 0) { _thisVue.expandRowKeys.push(row.bossID); _thisVue.loadChildList(row); } else { _thisVue.expandRowKeys.splice(_thisVue.expandRowKeys.indexOf(row.bossID), 1) } }, loadChildList(bossModel) { var _thisVue = this; var data = { startTime: _thisVue.formData.startTime, endTime: _thisVue.formData.endTime, dataType: _thisVue.formData.dataType, bossName: bossModel.bossName }; _thisVue.$nextTick(function () { axios.post(_thisVue.formUI.moduleUrl + 'LoadChildList', data) .then(function (response) { var rlt = response.data; if (rlt.isSuccess) { _thisVue.settleData.forEach((item, index) => { if (item.bossID == bossModel.bossID) { item.settleList = rlt.model.settleList; item.invoiceList = rlt.model.invoiceList; item.payableList = rlt.model.payableList; } }); } }) .catch(function (error) { alert(error); }) }); },