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
          }
        }
    }
}