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

    },
相关推荐
然我7 分钟前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子12 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹15 分钟前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器22 分钟前
指定阿里镜像原理
前端
枷锁—sha26 分钟前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha28 分钟前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜44 分钟前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
DanB241 小时前
html复习
javascript·microsoft·html
汉得数字平台1 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹1 小时前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux