element ui tree懒加载 新增，编辑，删除子节点后的刷新节点

前面一篇的table的懒加载做了三四天，做的心累。 不得不说这次tree的懒加载比table的懒加载好实现多了，至少官方文档里面提供了方法，不需要去过源码。业务逻辑也比前面的一个简单一些，没有修改父级节点的需求。

1.界面展示

做组织机构的管理，里面用了element-ui tree的懒加载，对树做新增子节点，删除节点，编辑节点后刷新节点数据，界面如下图所示。

2.界面主要代码 

<el-tree
          ref="tree"
          v-if="isTreeVisible"
          :lazy="true"
          :data="items"
          :props="defaultProps"
          :load="loadChildren"
          node-key="id"
          @node-click="select"
          :highlight-current="true"
          :expand-on-click-node="false">
            <span class="flex-adapter flex-horizontal flex-align-vertical-center" slot-scope="{ node, data }">
              <span class="flex-adapter" @click="select(data)">{{ node.label }}</span>
              <span>
                <el-button type="text" size="mini" @click="() => create(data, node)">新增</el-button>
                <el-button type="text" size="mini" @click="() => edit(data, node)">编辑</el-button>
                <el-button v-if="node.isLeaf" type="text" size="mini" @click="() => deleteItem(data)">删除</el-button>
              </span>
            </span>
        </el-tree>

      <create-or-update-organization-modal
        :id="dialogCreateOrEdit.id"
        :parentId="dialogCreateOrEdit.parentId"
        :parentType="dialogCreateOrEdit.parentType"
        v-model="dialogCreateOrEdit.isShow"
        :parentRegionId="dialogCreateOrEdit.parentRegionId"
        :parentRegionName="dialogCreateOrEdit.parentRegionName"
        @save='handleOnSave'>
      </create-or-update-organization-modal>

3.js主要逻辑

3.1新增

先判断父节点是否加载过，如果加载过，使用官方提供的append方法，将数据追加到父节点

如果未加载过，直接将父节点设置为非叶子节点

3.2编辑

直接更新节点数据

扫描二维码关注公众号，回复： 9303641 查看本文章

3.3删除

使用官方提供的remove方法，删除节点，并重新设置当前删除的父级为选中节点；

主要代码如下图所示

data () {
            return {
                parentId: null,
                organizationId: null,
                defaultProps: {
                    label: 'name',
                    children: 'children',
                    isLeaf: 'childCount'
                },
            };
        },

        methods: {
            //新增和编辑接口调用成功后
            handleOnSave (model) {
                const parentNode = this.$refs.tree.getNode(this.dialogCreateOrEdit.parentId);
                if (this.dialogCreateOrEdit.id) {
                    // 编辑，更新数据
                    const node = this.$refs.tree.getNode(this.dialogCreateOrEdit.id);
                    Object.assign(node.data, model);
                }
                else if (parentNode.loaded) {
                    //新增，且该节点已加载过
                    model.childCount = !model.childCount;
                    const data = Object.assign({}, model);
                    this.$refs.tree.append(data, this.dialogCreateOrEdit.parentId);
                }
                else {
                    // 新增，该节点未加载过，设置父节点不为叶子节点
                    parentNode.isLeaf = false;
                }
            },
            select (item) {
                this.organizationId = item.id;
            },
            // 打开新建子节点弹窗，存下当前节点的id和parentId供后面使用
            create (item, node) {
                this.organizationId = item ? item.id : -1;
                this.dialogCreateOrEdit.id = null;
                this.dialogCreateOrEdit.parentId = item ? item.id : -1;
                this.dialogCreateOrEdit.isShow = true;
            },
            // 打开编辑子节点弹窗，存下当前节点的id和parentId供后面使用
            edit (item, node) {
                this.organizationId = item ? item.id : -1;
                this.dialogCreateOrEdit.grandParentId = item ? item.parentId : -1;
                this.dialogCreateOrEdit.parentId = item ? item.id : -1;
                this.dialogCreateOrEdit.id = item.id;
                this.dialogCreateOrEdit.isShow = true;
            },
            // 删除节点
            deleteItem (item) {
                this.$confirm(this.$t('app.common.message.deleteWarningMessage', { 0: item.name })).then(async (result) => {
                    if (!result) {
                        return;
                    }
                    await this.api.deleteItem({ids: [item.id] });
                    await this.search();
                    this.$refs.tree.remove(item.id);
                    this.organizationId = this.parentId;
                    this.setCurrentHighlight(this.organizationId);
                });
            },
            search (parentId) {
                return new Promise((resolve, reject) => {
                    // 接口相关，需换成自己的接口并做相应处理
                    this.api.getAllByPage({ parentId: parentId, size: 100 }).then((result) => {
                        resolve(result.content);
                    }).catch((e) => {
                        reject(e);
                    });
                });
            },
            async loadChildren (node, resolve) {
                try {
                    this.organizationId = node.data.id ? node.data.id : this.parentId;
                    let result = [];
                    result = await this.search(node.data.id ? node.data.id : this.parentId);
                    resolve(result);
                    this.setCurrentHighlight(this.organizationId);
                }
                catch (e) {
                    this.loading = false;
                }
            },
            // 设置当前选中高亮
            setCurrentHighlight (id) {
                this.$nextTick(() => {
                    this.$refs.tree.setCurrentKey(id);
                });
            }
        }