el-tree选中节点

最新推荐文章于 2024-08-18 12:46:06 发布

小莉爱编程

最新推荐文章于 2024-08-18 12:46:06 发布

阅读量4.4k

点赞数 2

分类专栏： elementUi 文章标签： vue js

本文链接：https://blog.csdn.net/qq_45018844/article/details/117565143

版权

elementUi 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在JavaScript应用中，利用数据数组自动选中并（如果需要）展开树形结构的节点。核心方法是通过$refs访问tree组件，然后调用setChecked方法，传入对应的id和选中状态。同时，使用$nextTick确保DOM更新后再执行操作，以正确设置节点状态。此外，还展示了如何根据数据动态更新已选中的节点列表。

摘要由CSDN通过智能技术生成

根据数据来自动选中节点

在这里插入图片描述
首先需要拿到这个数组的值中的id，再与树的id进行比对，通过这个属性进行设置

主要是这个，根据id进行选中

this.$nextTick(()=>{
                //给每个id对应的check选中
                this.$refs.tree.setChecked(data.deptid,true, true)
              })

这里是整个方法，我注释掉的自动打开节点的

loadTreeList(){
        if(this.data_items.length > 0 ){
          this.data_items.forEach((data)=>{
          //自动打开节点
            // this.checkExpend.push(data.deptid)
            setTimeout(()=>{
              this.$nextTick(()=>{
                //给每个id对应的check选中
                this.$refs.tree.setChecked(data.deptid,true, true)
              })
            },100)
            //清空已经选中的
            this.$refs.tree.setCheckedKeys([]);
          })
        }else{
          this.$refs.tree.setCheckedKeys([]);
          this.checkExpend = [1]
        }
      },