el-tree通过default-expand-all动态控制展开/折叠

这篇具有很好参考价值的文章主要介绍了el-tree通过default-expand-all动态控制展开/折叠。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1、如下图通过勾选框动态控制展开/折叠,全选/清空
el-tree通过default-expand-all动态控制展开/折叠,elementui
2、实现方式如下:定义key,监听checked2修改treeKey,重新渲染tere;附加全选和清空。文章来源地址https://www.toymoban.com/news/detail-650321.html

      <div class="tree">
        <el-checkbox v-model="checked1">选中全部</el-checkbox>
        <el-checkbox v-model="checked2">展开全部</el-checkbox>
        <el-tree :key="treeKey" :data="treeData" show-checkbox node-key="id" :props="defaultProps" ref="tree" :default-expand-all="checked2"></el-tree>
      </div>


    watch: {
      // 树形控件全选/清空
      'checked1':function (newVale,oldVale) {
        if(newVale === false) {
          this.$refs.tree.setCheckedKeys([]);//清空
        } else {
          this.$refs.tree.setCheckedNodes(this.treeData);//全选
        }
      },
      // 树形控件展开/折叠
      'checked2':function (newVale,oldVale) {
        this.treeKey = Date.now();//重新渲染树结构,动态控制展开/折叠
      },
    },

到了这里,关于el-tree通过default-expand-all动态控制展开/折叠的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • el-tree 实现节点高亮

    要实现显示  el-tree  节点高亮,可以使用  el-tree  提供的  highlight-current  属性和  current-node-key  属性,以及  el-tree-node  组件提供的  highlight  属性。 首先,在  el-tree  组件中设置  highlight-current  属性为  true ,表示启用高亮当前节点的功能: 然后,在  el-tree  组件中

    2024年02月08日
    浏览(52)
  • el-tree 懒加载树

    el-tree 懒加载树 添加自定义图标 指定叶子节点 懒加载

    2024年02月12日
    浏览(44)
  • Vue单页面实现el-tree el-breadcrumb功能、el-tree右键点击树节点展示菜单功能、树节点编辑节点字段名称功能

    (1) 点击el-tree节点 使用el-breadcrumb展示选中树节点及父项数据         重点: handleNodeClick方法、getTreeNode方法 (2) 选择el-breadcrumb-item设置el-tree节点选中             必须设置属性: current-node-key=\\\"currentNodeKey\\\"  、 node-key=\\\"id\\\"           重点: 设置树节点渲染 this.$refs.tree.set

    2024年02月16日
    浏览(50)
  • el-tree 树全部展开或收起

    绑定属性expanded,树自带方法this.$refs.tree.store.root.expanded,在mounted方法中给树方法赋值expandAll = false,具体代码实现详情如下: html代码: js代码:

    2024年02月17日
    浏览(48)
  • 【el-tree】树形结构拖拽,修改分组

    背景: 项目中有个左侧菜单,并且各级菜单中的元素是可以拖拽到别的菜单中去,也就是树形结构拖拽修改分组,下面我介绍我项目中使用el-tree进行拖拽分组的方式. 效果: 拖拽到某个节点的前后 首先我们使用的是饿了么组件中的[el-tree]组件,他本身是自带拖拽功能的,只需要加上一

    2024年02月12日
    浏览(94)
  • el-tree组件的锚点链接

    el-tree部分: 组件内部部分: js部分:   这样的话点击el-tree的时候,所绑定的div就自动移动到顶部了 scrollIntoView({ behavior: \\\"smooth\\\" });

    2024年02月10日
    浏览(39)
  • el-tree中展示项换行展示

    本质上就是在vue代码中对el-tree的默认样式进行了修改,这是修改样式的代码。如果想了解详细的,往后看就行了 这里使用的是Vite(Home | Vite中文网 (vitejs.cn)) + Vue3 + Ts建立的项目,使用了element plus(设计 | Element Plus (element-plus.org))这个组件库。 package.json中对应的版本信息如

    2024年02月05日
    浏览(41)
  • el-tree转换为表格样式的记录2

    上一篇文章记录的是自己将树状数据转换为表格形式。但是出现了一个小bug,点击子节点时候会选中父节点,这个是正常需求没问题。但是我点击父节点时候取消所有子节点,父节点 选择也会失去,这是我不想要执行的。例如一个页面里面有主页,各种小组件,但是我只想

    2024年02月16日
    浏览(34)
  • 【el-tree】树形组件图标的自定义

    饿了么树形组件的图标自定义 默认样式:  可以看到el-tree组件左侧自带展开与收起图标,咱们可以把它 隐藏 :: 我的全部代码 其中自定义左侧图标的方法:  我的每条数据都自带icon属性,你没有的话也可以在数据拿到之后手动遍历添加一条icon属性进去,然后再el-tree中使用: 如果需

    2024年02月11日
    浏览(45)
  • 在el-tree懒加载中进行局部刷新

    在进行懒加载的树组件中,操作子节点新增、修改以及删除操作时,需要对树组件进行局部刷新:

    2024年02月10日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包