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

    },
相关推荐
AiXed1 小时前
PC微信WDA算法
前端·javascript·macos
博客zhu虎康2 小时前
React+Ant design
javascript·react.js·ecmascript
一只小阿乐6 小时前
react 封装弹框组件 传递数据
前端·javascript·react.js
533_6 小时前
[element-plus] el-tree 动态增加节点,删除节点
前端·javascript·vue.js
禁止摆烂_才浅7 小时前
前端开发小技巧-【JavaScript】- 获取元素距离 document 顶部的距离
前端·javascript·react.js
wshzd7 小时前
LLM之Agent(二十九)|LangChain 1.0核心组件介绍
前端·javascript·langchain
程序猿_极客7 小时前
Vue 2脚手架从入门到实战核心知识点全解析(day6):从工程结构到高级通信(附代码讲解)
前端·javascript·vue.js·vue2学习笔记
q***71857 小时前
海康威视摄像头ISUP(原EHOME协议) 摄像头实时预览springboot 版本java实现,并可以在浏览器vue前端播放(附带源码)
java·前端·spring boot
一只小阿乐7 小时前
vue3 使用v-model开发弹窗组件
javascript·vue.js·elementui
web加加7 小时前
vue3 +vite项目页面防f12,防打开控制台
前端·javascript·vue.js