全选/不全选
方法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
}
}
}
}
