el-tree树结构根据后端返回数据默认激活选中当前节点

html 复制代码
<el-tree class="task-note-tree" ref="elTree" :data="tagTreeList" default-expand-all node-key="labelId"
              :props="defaultProps" highlight-current :expand-on-click-node="false" 
              @node-click="handleNodeClick">
              <div slot-scope="{node, data}" class="tree-node">
                <span class="node-name text-hide-one" :title="data.name">{{ data.name }}</span>
              </div>
            </el-tree>
javascript 复制代码
// 获取后端数据
    async getinitData () {
      const res = await markTaskDetailPoints({
        photoId: this.currentData.Id,
        subTaskId: this.currentData.Id,
        taskCollectionId: this.currentData.taskCollectionId
      });
      this.table.loading = false;
      if (res.code === 200) {
        this.currentCanvasAll = res.data; 
        //this.tagTreeList表示所有的树结构信息
        //this.currentCanvasAll表示当前要选中的节点数据
        // 默认选中树节点
        await this.selectTree(this.tagTreeList, this.currentCanvasAll);
      }
    },
//节点点击事件
  handleNodeClick (data) {
      this.currentLabelId = data.labelId;
      //this.currentCanvasAll后端返回的节点id信息与当前当前的id节点是否一致
      this.currentCanvasData = this.currentCanvasAll.filter(item => item.labelId === this.currentLabelId);
      this.$nextTick(() => {
        // 确保 DOM 更新后执行 相关处理逻辑方法 
        this.clickFN();
      });
    },
//选中节点
    selectTree (treeData, currentCanvasAll) {
      this.currentCanvasData = [];
      treeData.forEach(node => {
        currentCanvasAll.forEach(item => {
        //根据后端返回的数据判断是否匹配
          if (item.labelId === node.labelId) {
            // 默认选中当前节点
             // this.$refs.elTree.setChecked(node, false) 表示勾选上当前节点 与show-checkbox配合
            this.$refs.elTree.setCurrentKey(item.labelId); //表示激活当前节点
            this.$nextTick(() => {
              // 确保 DOM 更新后再设置选中状态  
              this.handleNodeClick(item);
            });
          }
        });
        判断是否有子数据,有就执行回调
        if (node.child && node.child.length > 0) {
          this.selectTree(node.child, currentCanvasAll);
        }
      });

    },
相关推荐
新手村领路人30 分钟前
Firefox自定义备忘
前端·firefox
乖女子@@@42 分钟前
css3新增-网格Grid布局
前端·css·css3
百思可瑞教育1 小时前
使用UniApp实现一个AI对话页面
javascript·vue.js·人工智能·uni-app·xcode·北京百思可瑞教育·百思可瑞教育
伐尘1 小时前
【CE】图形化CE游戏教程通关手册
前端·chrome·游戏·逆向
不想吃饭e2 小时前
在uniapp/vue项目中全局挂载component
前端·vue.js·uni-app
非凡ghost2 小时前
AOMEI Partition Assistant磁盘分区工具:磁盘管理的得力助手
linux·运维·前端·数据库·学习·生活·软件需求
UrbanJazzerati2 小时前
前端入门:margin居中、border、box-radius、transform、box-shadow、mouse事件、preventDefault()
前端·面试
蝎子莱莱爱打怪2 小时前
🚀🚀🚀嗨,一起来开发 开源IM系统呀!
前端·后端·github
Enddme2 小时前
《前端笔试必备:JavaScript ACM输入输出模板》
前端·javascript·面试
前端鱼2 小时前
前端面试中值得关注的js题
前端·面试