解决element Tree结构设置默认选中无效

Vue组件：树结构加载默认选中

最新推荐文章于 2025-06-07 20:00:00 发布

原创最新推荐文章于 2025-06-07 20:00:00 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #javascript #前端

前端开发专栏收录该内容

6 篇文章

订阅专栏

在Vue应用中，遇到树形结构数据加载完成后设置默认选中的问题。通过$nextTick解决异步渲染问题，确保在数据加载完成后设置当前选中节点，并根据选中节点更新相关变量。

设置默认选中在树结构加载完成之前是无效的，使用this.$nextTick 设置

    getTreeList() {
      this.tableColumn = [];
      this.$http.post(`/run-manage/gcjc/dbng/selectSbData`).then((res) => {
        if (res.data.data) {
          this.data = res.data.data[0].children;
          if(this.stringPid){
            this.$nextTick(function() {
              this.$refs.tree.setCurrentKey(this.stringPid);
              let node = this.$refs.tree.getCurrentNode();
              console.log(node);
              if(node.children){
                if(node.children.length>0){
                  this.loadxAir = false;
                  this.yqname = node.children[0].monitoringobjectname;
                  this.monobjectid = node.children[0].id;
                  this.initialEchartDate(this.monobjectid);
                }
              }
            })
          }
        }
      });
    },