做全国行政区划的展示，包含街道数据有十几万条，全部加载接口比较慢，所以采取了table的懒加载，在新增子节点，编辑删除节点的过程中，官方文档里面并没有相对应的方法，里面遇到了很多坑，这里记录一下实现方法。
1.首先界面如图所示，业务场景：表格外层有创建按钮，创建的是第一层节点，表格上的添加是指添加子节点，编辑和删除是针对当前节点，编辑时可以编辑父级区划；
2.表格界面主要代码
<el-table
ref="table"
:loading="loading"
row-key="id"
:default-expand-all="false"
:lazy="true"
:load="load"
:tree-props="treeProps">
<el-table-column
prop="name"
label="行政区划名称"
min-width="200">
</el-table-column>
<el-table-column
prop="code"
label="行政区划代码"
min-width="200">
</el-table-column>
<el-table-column
label="操作"
min-width="200">
<template slot-scope="scope">
<el-button type="text" size="mini" @click="edit(scope)">编辑</el-button>
<span v-if="!scope.row.childrenCount">
<el-divider direction="vertical"></el-divider>
<el-button type="text" size="mini" @click="deleteItem(scope)">删除</el-button>
</span>
<el-divider direction="vertical"></el-divider>
<el-button type="text" size="mini" @click="create(scope)">新增</el-button>
</template>
</el-table-column>
</el-table>
// 新增编辑弹窗组件
<create-or-update-region-model
:currentRow="currentRow"
:id="dialogCreateOrEdit.id"
:parentId="dialogCreateOrEdit.parentId"
v-model="dialogCreateOrEdit.isShow"
:parentRegionName="dialogCreateOrEdit.parentRegionName"
@editSuccess='handleEditOnSave'
@addSuccess='handleAddOnSave'></create-or-update-region-model>3.js主要逻辑，分为新增，编辑和删除；
3.1新增
先判断是否加到最外层，加到最外层就直接push数据到this.refs.table.store.stats.data里面去；
如果不是最外层，先找到父级节点，将新的数据加入到父级的子节点中，并更新父级节点的子节点数量，具体方法见代码中的
addLazyTableItemToParent()方法3.2编辑
先判断是否改变父级节点，如果没有，直接更新数据；
如果改变了父级节点，先删除原始父级节点上的此节点，再去新的父级节点上添加此子节点；
此段逻辑主要在handleEditOnSave(),findNewParent()方法中
3.3删除
如果时最外层节点，直接在this.refs.table.store.stats.data里面splice此数据；
如果是内层节点，则删除该节点，并更新父级节点的子节点数量；
此段逻辑主要见deleteLazyTableItem()方法
下面是主要的js代码
<script>
export default {
name: 'RegionIndex',
data () {
return {
currentRow: null,
treeProps: {
children: 'children',
hasChildren: 'childrenCount'
},
dialogCreateOrEdit: {}
};
},
methods: {
getItems (id) {
return new Promise((resolve, reject) => {
//接口相关，根据自己的接口处理
this.api.getList({ parent: id }).then((result) => {
resolve(result);
}).finally(() => {
this.loading = false;
}).catch((e) => {
reject(e);
});
});
},
async load (tree, treeNode, resolve) {
try {
let result = await this.getItems(tree.id);
resolve(result);
}
catch (e) {
this.loading = false;
}
},
handleRowClick (row, event, column) {
this.currentRow = row;
},
//打开新增弹窗
create (scope) {
if (scope) {
this.dialogCreateOrEdit.parentId = scope.row ? scope.row.id : -1;
this.currentRow = scope.row;
}
else {
this.dialogCreateOrEdit.parentId = -1;
}
this.dialogCreateOrEdit.id = null;
this.dialogCreateOrEdit.isShow = true;
},
//打开编辑弹窗
edit (scope) {
this.editItem = scope.row;
this.currentRow = scope.row;
this.dialogCreateOrEdit.parentId = scope.row.parent;
this.dialogCreateOrEdit.id = scope.row.id;
this.dialogCreateOrEdit.isShow = true;
},
//删除
deleteItem (scope) {
const item = scope.row;
this.$confirm(this.$t('app.common.message.deleteWarningMessage', { 0: '' })).then(async (result) => {
if (!result) {
return;
}
// 删除接口，根据自己项目相应处理
await this.api.deleteItem({ id: item.id });
this.deleteLazyTableItem(item); this.$message.success(this.$t('app.common.message.successfullyDeleted'));
});
},
deleteLazyTableItem (item) {
const store = this.$refs.table.store;
if (item.parent != -1) {
let parentRow = store.states.data.find(child => child.id == item.parent);
if (!parentRow) {
const keys = Object.keys(store.states.lazyTreeNodeMap);
for (let i = 0; i < keys.length; i++) {
parentRow = store.states.lazyTreeNodeMap[keys[i]].find(child => child.id == item.parent);
if (parentRow) {
break;
}
}
}
parentRow.childrenCount--;
const parent = store.states.lazyTreeNodeMap[item.parent];
const index = parent.findIndex(child => child.id == item.id);
parent.splice(index, 1);
}
else {
const parent = store.states.data;
const index = parent.findIndex(child => child.id == item.id);
parent.splice(index, 1);
}
},
// 编辑行政区划成功
handleEditOnSave (model) {
const newItemData = Object.assign({}, model);
const parentId = this.dialogCreateOrEdit.parentId;
if (model.parent == parentId) {
// 未编辑父级节点，更新当前数据
Object.assign(this.editItem, newItemData, {
childrenCount: this.editItem.childrenCount
});
}
else {
// 编辑父级节点，先删除当前节点，再去新的父级节点添加子节点
this.deleteLazyTableItem(this.editItem);
if (model.parent == -1) {
// 添加最外层
this.addOuterTableItem(newItemData);
}
else {
this.findNewParent(model.parent, newItemData);
}
}
},
// 查找新的父节点及数据后，添加子节点
findNewParent (parentId, newItemData) {
const store = this.$refs.table.store;
// 首先在最外层里面找
let parentRow = store.states.data.find(item => item.id === parentId);
if (parentRow) {
parentRow.childrenCount++;
}
// 不在最外层
else {
const keys = Object.keys(store.states.lazyTreeNodeMap);
for (let i = 0; i < keys.length; i++) {
parentRow = store.states.lazyTreeNodeMap[keys[i]].find(item => item.id == parentId);
if (parentRow) {
break;
}
}
if (parentRow) {
parentRow.childrenCount++;
}
}
const parentTreeNode = store.states.treeData[parentId];
this.addLazyTableItemToParent(parentTreeNode, parentId, newItemData);
},
// 新增行政区划成功
handleAddOnSave (model) {
const newItemData = Object.assign({}, model);
const parentId = this.dialogCreateOrEdit.parentId;
const store = this.$refs.table.store;
if (parentId == -1) {
// 添加最外层
this.addOuterTableItem(newItemData);
}
else {
const parentRow = this.currentRow;
parentRow.childrenCount++;
// treeData为所有已加载过的节点的子节点
const parentTreeNode = store.states.treeData[parentId];
this.addLazyTableItemToParent(parentTreeNode, parentId, newItemData);
}
},
// 添加数据放到最外层的数据中去
addOuterTableItem (newItemData) {
const store = this.$refs.table.store;
store.states.data.push(newItemData);
},
// 把数据加到父级节点上去
addLazyTableItemToParent (parentTreeNode, parentId, newItemData) {
const store = this.$refs.table.store;
// 如果在已加载过的节点的子节点中
if (parentTreeNode) {
// 如果该节点已加载
if (parentTreeNode.loaded) {
store.states.lazyTreeNodeMap[parentId].push(newItemData);
}
}
else {
store.states.treeData[parentId] = {
display: true,
loading: false,
loaded: false,
expanded: false,
children: [],
lazy: true,
level: 0
};
}
}
}
};
</script>