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); }) }); },
分类:
前端
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾(3.3-3.9)
· winform 绘制太阳,地球,月球 运作规律