Vue+Element中Table懶加載，新增范抓、刪除操作后手動(dòng)更新
今天開發(fā)一個(gè)自動(dòng)分類管理系統(tǒng)中行業(yè)類型管理骄恶，使用table tree 進(jìn)行節(jié)點(diǎn)懶加載，遇到的問(wèn)題是：使用load 進(jìn)行懶加載后在tableData中是取不到子節(jié)點(diǎn)數(shù)據(jù)匕垫，所以在為某個(gè)節(jié)點(diǎn)新增了子節(jié)點(diǎn)后無(wú)法實(shí)現(xiàn)刷新僧鲁，想到使用刷新真?zhèn)€tableData但是感覺不對(duì)（刷新整個(gè)源數(shù)據(jù)太浪費(fèi)資源了，而且體驗(yàn)極差）, 直接上代碼吧
html 代碼
<el-table
:data="tableData"
style="width: 100%"
row-key="id"
lazy
border
:height="tableHeight"
:load="loadNextNode"
ref="tableDom"
:expand-row-keys="idArr"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
<el-table-column
prop="typeName"
label="分類名稱"
width="180">
</el-table-column>
<el-table-column
prop="refUserId"
label="創(chuàng)建人">
</el-table-column>
<el-table-column
prop="dateCreate"
label="創(chuàng)建日期"
width="180">
</el-table-column>
<el-table-column
prop="updateCreate"
label="修改日期"
width="180">
</el-table-column>
<el-table-column label="操作" width="280">
<template slot-scope="scope">
<el-button type="text" size="small">編輯行業(yè)類型</el-button>
<el-button type="text" size="small" @click="crateIndustryType(scope.row)">創(chuàng)建行業(yè)類型</el-button>
<el-button type="text" size="small" style="color:#ff3e3e" @click="delIndustry(scope.row)">刪除</el-button>
</template>
</el-table-column>
</el-table>
<industry-dialog :industryForm="industryForm" :dialogOptType="dialogOptType" @formCommit="getFormCommit"
ref="industryDialog"></industry-dialog>
javascript 代碼
data() {
return {
tableData: [],
loadNodeMap: new Map()
}
},
methods: {
// 懶加載
loadNextNode(tree, treeNode, resolve) {
const id = tree.id;
// 將當(dāng)前操作報(bào)錯(cuò)起來(lái)
this.loadNodeMap.set(id, {tree, treeNode, resolve})
let url = `/industryType/findListByPid?id=${tree.id}`;
this.$post(url).then(res => {
if (res.data.code === 200) {
resolve(res.data.results)
// 如果數(shù)據(jù)為空 設(shè)置hasChildren為false
if (res.data.results.length <= 0) tree.hasChildren = false;
} else {
this.$message({
message: res.data.msg,
type: 'warning'
});
}
}).catch(err => {
console.log(err);
});
},
/**
* 創(chuàng)建行業(yè)類型,打開對(duì)話框
* @param currRow{Object}選擇的行對(duì)象
* @desc isNode 為行業(yè)與類型的標(biāo)識(shí)【0 代表行業(yè) 1 代表類型】
* pid 為父節(jié)點(diǎn)id
*/
crateIndustryType(currRow) {
this.selectCurrRow = currRow;
// 新增數(shù)據(jù)省略象泵。寞秃。。偶惠。 我使用的是dialog 提示新增 類型
},
/**
* 獲取子組件返回的數(shù)據(jù) 將其提交到后臺(tái)保存春寿，同時(shí)更新當(dāng)前子節(jié)點(diǎn)
* @param commitData 表單數(shù)據(jù)
* @param dialogOptType 操作類型 【create-industry 創(chuàng)建行業(yè)、create-type創(chuàng)建行業(yè)類型忽孽、edit 編輯行業(yè)類型】
*
*/
getFormCommit(commitData, dialogOptType) {
this.$post('/industryType/save', industryData).then(res => {
if (res.data.code === 200) {
this.loadText = msg.add_msg_succ;
this.loadState = 'success';
this.$refs.load.manualLoadClose();
this.$refs.industryDialog.closeDialog();
if (dialogOptType === 'create-type') {
this._reRenderChildrenNodeAfterAdd(res.data.results)
} else {
this._tableDataLoading()
}
} else {
this.$message({
message: res.data.msg,
type: 'warning'
});
}
}).catch(err => {
this.loadText = msg.err_msg;
this.loadState = 'fail';
});
},
/**
* 在新增類型后根據(jù)selectCurrRow的id 獲取loadNodeMap 中對(duì)應(yīng)的
* resolve 進(jìn)行子節(jié)點(diǎn)刷新操作
* 刷新table 列表
*@param callbackRow{Array} 執(zhí)行新增后返回當(dāng)前節(jié)點(diǎn)的子節(jié)點(diǎn)數(shù)組
*
*/
_reRenderChildrenNodeAfterAdd(callbackRow) {
const {id} = this.selectCurrRow;
if (this.loadNodeMap.has(id)) {
const {tree, treeNode, resolve} = this.loadNodeMap.get(id);
this.$set(this.$refs.tableDom.store.states.lazyTreeNodeMap, id, []);
resolve(callbackRow)
} else {
this.selectCurrRow.hasChildren = true
}
},
}
操作截圖
新增行業(yè)類型
新增成功
點(diǎn)擊查看子節(jié)點(diǎn)
新增成功
