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);
                    })
            });
        },

 

posted @ 2023-10-25 15:32  竹殇  阅读(54)  评论(0编辑  收藏  举报