el-tree默认展开或折叠，全选或全不选

亦凉 2022-11-07 04:29 1168阅读 0赞

element-ui中 `tree` 树形控件的相关功能，演示图：  
![在这里插入图片描述][2021031111275166.gif]  
代码部分：

<div>
      <el-button type="primary" size="mini" @click="expand">展开/折叠</el-button>
      <el-button type="primary" size="mini" @click="checkAll">全选</el-button>
      <el-button type="primary" size="mini" @click="checkNot">全不选</el-button>
    </div>
    <el-tree :data="list" show-checkbox node-key="id" :props="defaultProps" check-on-click-node :default-expand-all="isExpand" ref="tree" @check-change="checkChange">
    </el-tree>

js相关：

export default { 
      data () { 
        return { 
          list: [],
          isExpand: true
        }
      },
      methods: { 
        expand () {  // 展开/折叠
          this.isExpand = !this.isExpand
          const nodes = this.$refs.tree.store._getAllNodes()
          // 或者方法二
          // const nodes = this.$refs.tree.store.nodesMap
          for (let i in nodes) { 
            nodes[i].expanded = this.isExpand
          }
        },
        checkAll () {  // 全选
          this.$refs.tree.setCheckedNodes(this.list)
          // 或者方法二
          // this.list.forEach(item => { 
          // this.$refs.tree.setCheckedKeys([item.id])
          // })
        },
        checkNot () {  // 全不选
          this.$refs.tree.setCheckedKeys([])
        },
    }

补充：全选/不全选可以使用一个 `checkbox` 实现，就不用两个函数啦

[2021031111275166.gif]: /images/20221023/6b8b3dc6fe1d403da46379045e52d325.png

发表评论取消回复

表情：

评论列表（有 0 条评论，1168人围观）

还没有评论，来说两句吧...

相关阅读

相关全选全不选案例

全选框案例：先看效果图： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM

以你之姓@/ 2022年12月19日 13:09/ 0 赞/ 180 阅读

相关全选，全不选功能

需求： 1.点击全选，子项全部选中，再次点击，则全部不选中。 2.选中全部子项，全选选中，没有选中则不选中全选按钮。前端部分：调

末蓝、/ 2022年11月17日 05:09/ 0 赞/ 240 阅读

相关 el-tree默认展开或折叠，全选或全不选

element-ui中 `tree` 树形控件的相关功能，演示图： ![在这里插入图片描述][2021031111275166.gif] 代码部分： <div

亦凉/ 2022年11月07日 04:29/ 0 赞/ 1169 阅读

相关 Dom 全选全不选反选

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR

桃扇骨/ 2022年06月11日 00:06/ 0 赞/ 273 阅读

相关 jquery 复选框全选、取消全选、全选按钮在未全选状态不选

代码： <input type="checkbox" name="chooseAll" οnclick="checkAll()">全选 <input type

系统管理员/ 2022年06月02日 04:27/ 0 赞/ 318 阅读

相关 js全选/全不选/反选

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

迷南。/ 2022年05月13日 10:08/ 0 赞/ 272 阅读

相关全选、全不选,批量操作

<th>全 选<br><input type="checkbox" id="CheckAll" οnclick="IsCheckAll()"></th> <th>

野性酷女/ 2022年05月08日 14:46/ 0 赞/ 163 阅读

相关全选、全不选,批量操作

<th>全 选<br><input type="checkbox" id="CheckAll" οnclick="IsCheckAll()"></th> <th>

r囧r小猫/ 2022年05月07日 08:22/ 0 赞/ 272 阅读

相关 js全选或全不选

1 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3U

太过爱你忘了你带给我的痛/ 2022年03月19日 03:18/ 0 赞/ 302 阅读

相关全选-反选-全不选

简单易懂，上手快 $(function() \{ //全选 $("\all").click(function()

绝地灬酷狼/ 2021年10月03日 02:48/ 0 赞/ 542 阅读