el-tree组件实现全选/不全选和展开/折叠功能

全选/不全选

方法1
<template>部分
<div>
    <!-- 复选框,点击事件 -->
	<el-checkbox v-model="isSelectAll" @change="selectAll">全选/全不选</el-checkbox>
    <!-- 要操作的树组件,必须要有 ref,node-key-->
    <el-tree ref="myTree" 
             v-bind="myTree"
             node-key="id"
             show-checkbox
             :default-expand-all="isExpand"
             :filter-node-method="filterNode"
        />
</div>

<script>部分
export default {
    data(){
        return {
          myTree: {
            data: [],
            props: { children: 'children', label: 'name' }
          },
          // tree是否全选,复选框默认状态()
          isSelectAll: false
        }
    },
    methods: {
        // 加载树的数据
        getTreeData() {
          // 异步获取也好,固定数据也好,获得数据后先将树的子节点遍历出来
          this.myTree.data = xxx得到树的数据
          xxx其他操作
        },
        // 全选/不全选
        selectAll() {
            if (this.isSelectAll) {
                // 	设置目前勾选的节点,使用此方法必须设置 node-key 属性
               this.$refs.organizationData.setCheckedNodes(this.myTree.data);
            } else {
                // 全部不选中
                this.$refs.menuOrUserTree.setCheckedNodes([])
            }
        }
    }
}
:简单,好实现
:扩展性差,不够灵活
方法2

获取el-tree子节点,

<template>部分
<div>
    <!-- 复选框,点击事件 -->
	<el-checkbox v-model="isSelectAll" @change="selectAll">全选/全不选</el-checkbox>
    <!-- 要操作的树组件,必须要有 ref,node-key-->
    <el-tree ref="myTree" 
             v-bind="myTree"
             node-key="id"
             show-checkbox
             :default-expand-all="isExpand"
             :filter-node-method="filterNode"
        />
</div>

<script>
export default {
    data(){
        return {
          myTree: {
            data: [],
            props: { children: 'children', label: 'name' }
          },
          // 树所有可选择的子节点
          treeAllChildNode: [],
          // tree是否全选,复选框默认状态()
          isSelectAll: false
        }
    },
    methods: {
        // 加载树的数据
        getTreeData() {
          // 异步获取也好,固定数据也好,获得数据后先将树的子节点遍历出来
          this.myTree.data = xxx得到树的数据
          // 先清空 , 子节点信息
          this.treeAllChildNode = []
          // 获取树所有可选择的子节点
          this.getTreeAllChildNode(this.myTree.data)
          xxx其他操作
        },
        // 递归获取树所有可选择的子节点
        getTreeAllChildNode(treeData) {
          // 树长度为0 结束操作
          if (treeData.length === 0) {
            return
          }
          // 遍历树的数据
          for (let i = 0; i < treeData.length; i++) {
            // 当前遍历的数据是否还有子节点
            let children = treeData[i].children
            if (children && children.length > 0) {
              // 有,则递归
              this.getTreeAllChildNode(children)
            } else if (treeData[i].disabled === false) {
              // 没有,则判断当前节点是否是可选择状态
              // 将子节点id 追加给 treeAllChildNode (子节点数组也可声明为对象,将节点信息存储)
              this.treeAllChildNode.push(treeData[i].id)
            }
          }
        },
        // 全选/不全选
        selectAll() {
            if (this.isSelectAll) {
                // 遍历将子节点全选中
                for (let i = 0; i < this.treeAllChildNode.length; i++) {
                    this.$refs['menuOrUserTree'].setChecked(this.treeAllChildNode[i], true, false)
                }
            } else {
                // 全部不选中
                this.$refs.menuOrUserTree.setCheckedNodes([])
            }
        },
    }
}
:扩展性强(可自定义选中的数据,并且对不可选中的选项做筛选),可自定义选择
:写的多
注意事项

每次获取树数据需要对字节点数组(对象)进行清空

树(el-tree)一键展开和折叠

具体看代码

<template>部分
<div>
	<!-- 复选框,且带有点击事件 -->
    <el-checkbox v-model="isExpand" @change="expandAll">展开/折叠</el-checkbox>
	<!-- 操作的树组件 -->
    <el-tree ref="myTree" 
             v-bind="myTree"
             node-key="id"
             show-checkbox
             :default-expand-all="isExpand"
             :filter-node-method="filterNode"
        />
</div>

<script>部分
export default {
    data(){
        return {
          // tree是否展开
          isExpand: true
        }
    },
    methods: {
        // 展开/折叠
        expandAll() {
          for (var i = 0; i < this.$refs.myTree.store._getAllNodes().length; i++) {
            // 根据isExpand, tree展开或折叠
            this.$refs.myTree.store._getAllNodes()[i].expanded = this.isExpand
          }
        }
    }
}
  • 4
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
方法1中的代码示例展示了如何使用Element UI中的el-checkbox和el-tree实现全选/全不选的功能。在模板部分,el-checkbox绑定了isSelectAll属性,并监听change事件,调用selectAll方法。el-tree组件设置了ref属性为"myTree",并绑定了相关属性和方法。selectAll方法中,根据isSelectAll属性的值来选择全部节点或取消选择全部节点。 方法2中的代码示例也是使用Element UI中的el-checkbox和el-tree实现全选/全不选的功能。在模板部分,el-checkbox绑定了isExpand属性,并监听change事件,调用expandAll方法。el-tree组件同样设置了ref属性为"myTree",并绑定了相关属性和方法。expandAll方法中,遍历所有节点,根据isExpand属性的值来展开折叠节点。 方法3的代码示例展示了另一种实现el-tree全选/反选的方法。在模板部分,el-checkbox绑定了checkAll属性,并监听change事件,调用checkAllChange方法。el-tree组件设置了ref属性为"channelTree",并绑定了相关属性和方法。checkAllChange方法中,根据checkAll属性的值来选择全部节点或取消选择全部节点。 综上所述,以上三种方法都能实现el-tree全选/反选功能,具体选择哪一种方法取决于你的需求和实际情况。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [el-tree组件实现全选/不全选展开/折叠功能](https://blog.csdn.net/weixin_48845078/article/details/124460543)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *3* [[element-ui] el-tree实现全选/反选、默认全选](https://blog.csdn.net/qq_14993591/article/details/123396331)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值