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

    },
相关推荐
天天进步2015几秒前
Motia事件驱动的内核:深入适配器(Adapter)层看消息队列的流转
javascript
北极糊的狐4 分钟前
若依项目vue前端启动键入npm run dev 报错:不是内部或外部命令,也不是可运行的程序或批处理文件。
前端·javascript·vue.js
XRJ040618xrj7 分钟前
Nginx下构建PC站点
服务器·前端·nginx
We་ct16 分钟前
LeetCode 289. 生命游戏:题解+优化,从基础到原地最优
前端·算法·leetcode·矩阵·typescript
jiayong2343 分钟前
Vue2 与 Vue3 核心原理对比 - 面试宝典
vue.js·面试·职场和发展
有诺千金1 小时前
VUE3入门很简单(4)---组件通信(props)
前端·javascript·vue.js
2501_944711431 小时前
Vue-路由懒加载与组件懒加载
前端·javascript·vue.js
雨季6661 小时前
Flutter 三端应用实战:OpenHarmony “心流之泉”——在碎片洪流中,为你筑一眼专注的清泉
开发语言·前端·flutter·交互
换日线°1 小时前
前端3D炫酷展开效果
前端·3d
广州华水科技1 小时前
大坝变形监测的单北斗GNSS技术应用与发展分析
前端