在一次处理树状图数据量过多问题时遇到该问题，所以写下文档进行记录，也希望能帮助到其他有相同烦恼问题的人。

分享人才是最大的受益者，其实之前我写的代码比你们见到的要繁琐和不规范的多，在写本篇博客的过程中，也发现了自己的很多问题。如果您在阅读该文章时发现了其他问题，烦请批评指正。

先贴一下正常使用的代码。

...
	<el-tree @node-click="openItem" 
		:load="loadNode" lazy accordion
	></el-tree>
    <el-button @click="changeAction('add')">新增同级</el-button>
    <el-button @click="changeAction('addChild')">新增下级</el-button>
    <el-button @click="changeAction('edit')">编辑</el-button>
    <el-button @click="changeAction('show')">预览</el-button>
    <el-button @click="changeAction('del')">删除</el-button>
...
	data(){
		return {
			node:null, // 当前选中结点
			isParent：false, // 是否需要操作父结点 
		}
	},
	...
    openItem(item, node) {
        // console.log(node,'点击事件节点');
        this.node = node;
    },
    // 加载时调用该函数
    async loadNode(node, resolve) {
        this.node = node;
        // 这个地址和参数大家记得替换哈 这是我用axios包装的一个请求
        let data = await getGridTreeAuth(
            qs.stringify({ tier: node.level, id: node?.data?.id })
        ).then(res => {
            let rData = res.data;
            if (rData.status === 1001) {
                return rData.result;
            } else {
            	return [];
			}
        });
        return resolve(data);
    },
    // 以下为操作代码
    changeAction(type) {
        switch (type) {
            // 添加同级
            case "add":
                this.isParent = true;
                break;
            // 添加下级
            case "addChild":
                this.isParent = false;
                break;
            // 编辑
            case "edit":
                this.isParent = true;
                break;
            // 预览
            case "show":
				...
                break;
            // 删除
            case "del":
                this.isParent = true;
                this.getData();
                break;
        }
    },
    // 该段代码会在编辑、新增同级、新增下级、删除等操作保存时调用，用于刷新将要刷新的结点。
    getData() {
        let node = this.isParent ? this.node.parent : this.node;
        node.loaded = false;
        node.isLeaf = false;
        this.node = node;
        this.$set(node, "expanded", false);
        this.$set(node, "loaded", false);
        this.$set(node, "isLeaf", false);
    },

博主一共遇到了以下几种场景，我们分别来看解决办法：

新增同级

新增同级，我们要刷新的是该结点的父级。

            // 添加同级
            case "add":
                this.isParent = true;
                break;

新增下级

新增下级，我们要刷新的是该结点本结点。

            // 添加下级
            case "addChild":
                this.isParent = false;
                break;

删除

删除当前结点，我们要刷新的是该结点的父级。

            // 删除
            case "del":
                this.isParent = true;
                this.getData();
                break;

点击最前方打开、收起上级按钮

博主遇到的场景是左侧树状图，右侧是某一个结点的详情。所以当用户一直在惦记左侧的关闭打开按钮时，会无法将左侧的高亮和右侧的详情对照，也无法判定添加或者删除结点时该如何刷新。
故采用了最简单粗暴的方式：当惦记左侧展开闭合按钮时，将右侧详情清空。
这段代码涉及到一些逻辑操作，各位按照自己的代码逻辑进行相应的操作即可。

该操作会产生的问题

上述所说，清空右侧详情之后，又产生了新的问题：如果此时用户点击操作区域的按钮，将会产生问题。故需要在结点展开和关闭时进行记录状态来控制操作按钮的可点击状态。