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);
        }
      });

    },
相关推荐
网安蟹佬霸15 分钟前
OSINT开源情报收集实战:从信息搜集到资产测绘(2026最新万字保姆级指南)
前端·网络·安全·web安全·网络安全·开源
单线程_0134 分钟前
【源码阅读】Vue3 Tokenizer 词法分析器完整状态机流转深度梳理(3.4+ 新版架构)
前端
PBitW1 小时前
PM 丢来 3 个 Excel、12 个功能、4 种情形?用 TRAE Work 30 分钟整理成前端开发文档
前端·trae
学习星球2 小时前
Solid.js 实战:拆解官方 RealWorld 项目
开发语言·javascript·vue.js
风骏时光牛马3 小时前
AIAgent高可用架构:弹性容错与故障自愈的落地实践
前端
IT_陈寒3 小时前
Vue的响应式什么时候会失灵?这个坑我踩了
前端·人工智能·后端
烟锁池塘柳03 小时前
解决 Firefox 浏览器网页文本选中高亮不明显问题(含仅修改特定网站高亮显示的方案)
前端·firefox
Patrick_Wilson3 小时前
Web 认证方案技术指南
前端·后端·面试
YuJie4 小时前
JSBridge 基础知识
前端·javascript
BigTopOne4 小时前
Ubuntu 虚拟机编译 WebRTC Android AAR(M140 / branch-heads/7339)
前端