场景

如上图所示，左边展示分组及分组下的标签，点击某个标签，在右边展示某个标签的详情，可以对标签内容进行编辑保存，还可对标签进行搜索，默认展示全部标签，展开一级不目下标签，若对标签进行搜索筛选，则把每个节点都展开

实现准备

准备两棵树，一颗树存放全量标签，一棵树存放筛选后的标签
在获取懒加载数据时缓存第一个节点，在编辑标签保存后刷新列表时使用
每次编辑标签时，先把编辑的标签进行本地存储，在刷新树状列表完成后根据id进行高亮回显及标签展示

实现步骤

//这棵树是搜索标签时展示的树
<div v-if="Boolean(searchTreeList)">
  <el-tree
    ref="tree1"
    class="trees"
    @node-click="handleNodeClick"
    :data="searchTreeList"
    check-on-click-node
    :expand-on-click-node="false"
    :props="defaultProps"
    node-key="id"
    :highlight-current="true"
    :filter-node-method="filterNode"
    default-expand-all
  >
    <div slot-scope="{ data }" class="text-hidden">
      <el-tooltip
        class="item"
        effect="dark"
        :content="data.name"
        placement="top-start"
      >
        <span>
          <qz-icon
            class="icon-style icon-folder"
            v-if="!data.isLabel"
          ></qz-icon>
          {{ data.name }}
        </span>
      </el-tooltip>
    </div>
  </el-tree>
</div>
//这棵树是默认展示全量标签时展示的
<div class="data-tag-list" v-else>
  <el-tree
    v-if="!this.tags"
    ref="tree"
    class="trees"
    @node-click="handleNodeClick"
    :data="tagsList"
    check-on-click-node
    :expand-on-click-node="false"
    :props="defaultProps"
    node-key="id"
    :highlight-current="true"
    :filter-node-method="filterNode"
    :load="loadNode"
    lazy
    :default-expanded-keys="defaultExpend"
    :current-node-key="defaultExpend[0]"
  >
    <div slot-scope="{ data }" class="text-hidden">
      <el-tooltip
        class="item"
        effect="dark"
        :content="data.name"
        placement="top-start"
      >
        <span>
          <qz-icon
            class="icon-style icon-folder"
            v-if="!data.isLabel"
          ></qz-icon>
          {{ data.name }}
        </span>
      </el-tooltip>
    </div>
  </el-tree>
</div>
export default {
	data(){},
	methods:{
		// 懒加载节点
	    loadNode(node, resolve) {
	      let that = this;
	      if (node && node.level === 0) {
	      //把节点缓存起来，在编辑标签保存后刷新懒加载列表时使用
	        this.node_had = node; //这里是关键！在data里面定义一个变量，将node.level == 0的node存起来
	        this.resolve_had = resolve; //同上，把node.level == 0的resolve也存起来
	        that.getTreeList(resolve);
	      } else {
	        this.getTreeList(resolve, node && node.data);
	        resolve([]);
	      }
	    },
	    // 获取树状节点
	    getTreeList(resolve, node = "") {
	      if (node.isLabel || this.tags) {
	        resolve([]);
	      } else {
	        let label = node
	          ? node.categoryId
	            ? node.categoryId + "-" + node.id
	            : node.id
	          : "";
	        // 获取树状数据
	        getTreeLabels(this.type, label)
	          .then((res) => {
	            // 获取上次编辑的标签
	            let current = JSON.parse(sessionStorage.getItem("currentLabel"));
	
	            if (current) {
	              // 如果含有搜索条件
	              if (this.filterText.trim()) {
	                this.$nextTick(() => {
	                  //高亮上次编辑的标签
	                  this.$refs.tree1 && this.$refs.tree1.setCurrentKey(current.id);
	                  // 获取高亮节点的node节点
	                  let currentNode =
	                    this.$refs.tree1 && this.$refs.tree1.getNode(current.id);
	                    // 触发高亮节点的点击事件，吧这个标签的详情展示在右边
	                  currentNode?this.handleNodeClick(currentNode.data, currentNode):''
	                });
	              } else {//在展示全量标签
	                this.$nextTick(() => {
	                  // 获取高亮标签的分组，并展开标签所在分组
	                  this.defaultExpend = current.categoryId.split("-");
	                  this.defaultExpend.push(current.id);
	                });
	                this.$nextTick(() => {
	                  this.$refs.tree && this.$refs.tree.setCurrentKey(current.id);
	                  let currentNode =
	                    this.$refs.tree && this.$refs.tree.getNode(current.id);
	                  currentNode?this.handleNodeClick(currentNode.data, currentNode):''
	                });
	              }
	            } else {
	              this.defaultExpend = [];
	              this.searchDefault(res.data);
	            }
	            resolve(res.data);
	          })
	          .catch((err) => {
	            console.log(err.msg || "");
	          });
	      }
	    },
	    // 点击标签展示详情
	    handleNodeClick(data, Node) {
	      // this.isShowSave = false;
	      this.isNew = false;
	      if (Node.level != 1 && data.isLabel) {
	        this.item = data;
	        this.rightTitle = data.name;
	      }
	    },
	    //默认展示最里面一层的第一个,如果是保存编辑后的刷新，则展示编辑项
	    searchDefault(arr) {
	      arr[0] && arr[0].id ? this.defaultExpend.push(arr[0].id) : "";
	      if (this.type == "field" && arr[0]) {
	        if (arr[0].children && arr[0].children.length) {
	          this.searchDefault(arr[0].children);
	        } else {
	          this.$nextTick(() => {
	            this.item = arr[0] || {};
	            this.rightTitle = arr[0].name;
	            this.$refs.tree && this.$refs.tree.setCurrentKey(this.rightTitle);
	            this.$refs.tree1 && this.$refs.tree1.setCurrentKey(this.rightTitle);
	          });
	        }
	      } else if (this.type == "table" && arr[0]) {
	        if (arr[0] && arr[0].tableChildren) {
	          this.searchDefault(arr[0].tableChildren);
	        } else {
	          this.$nextTick(() => {
	            this.item = arr[0] || {};
	            this.rightTitle = arr[0] && arr[0].name;
	            this.$refs.tree && this.$refs.tree.setCurrentKey(this.rightTitle);
	            this.$refs.tree1 && this.$refs.tree1.setCurrentKey(this.rightTitle);
	          });
	        }
	      } else if (!arr[0]) {
	        this.item = {};
	        this.rightTitle = "";
	      }
	    },
	    // 刷新树状列表(编辑标签保存后触发refresh方法)
	    refresh(res, save) {
	      if (this.filterText.trim()) {
	        getSearchLabels(this.type, this.filterText)
	          .then((res) => {
	            this.searchTreeList = res.data;
	            this.searchDefault(res.data);
	          })
	          .catch(() => {});
	      } else {
	        this.node_had.childNodes = []; //把存起来的node的子节点清空，不然会界面会出现重复树！
	        this.loadNode(this.node_had, this.resolve_had); //再次执行懒加载的方法
	      }
	    }
	},
	mounted(){}
}