el-tree全部收缩

很多人他就是不看文档

已于 2022-05-31 18:27:43 修改

阅读量1.1k

点赞数

文章标签： elementui vue.js 前端

于 2022-05-18 13:54:30 首次发布

本文链接：https://blog.youkuaiyun.com/m0_48292596/article/details/124840859

版权

这篇博客介绍了如何在Vue项目中处理el-tree组件的懒加载和全选状态。通过遍历节点属性设置expanded为false实现全部收缩，同时控制checked属性进行全选操作。此外，还展示了在数据变化时更新懒加载树结构的方法，并提供了watch监听treeData变化的处理逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

el-tree,没有提供全部收缩api给我们

但是他是利用expanded属性来控制收缩的

所以我们可以遍历他节点属性

this.$refs.tree.root.childNodes.forEach((e) => {

e.expanded = false;//这个是控制收缩展开
        ele.checked=false//这个控制是否选择 要在复选款模式下消
// 这个可以适用于懒加载的时候 全部取选择状态

});

//懒加载的情况下更新数据
//在data下新建两个变量 缓存我们的loadNode的两个参数 node 和resolve


 loadNode(node, resolve) {
      console.log(node)
      if (node.level === 0) {
         this.rootNode = node//level0的时候 更新树结构数据
        this.rootResolve = resolve
}
}


    resetNode(){//更新懒加载树结构数据方法
      var theChildren = this.rootNode.childNodes
      theChildren.splice(0, theChildren.length)
      this.loadNode(this.rootNode, this.rootResolve)
    },

  watch:{
    treeData:{
      handler(){ //treeData数据变化更新树结构数据
        this.rootNode&&this.resetNode()
      },
      deep:true
    }
  },