<template>
<el-row :gutter="20">
<el-col :span="6" :offset="0">
<el-checkbox v-model="isExpand" @change="handleExpand">展开/关闭</el-checkbox>
</el-col>
<el-col :span="6" :offset="0">
<el-checkbox v-model="isSelectAll" @change="handleSelectAll">全选/取消权限</el-checkbox>
</el-col>
</el-row>
<el-tree ref="tree" :data="menuList" :props="props" show-checkbox node-key="id"/>
</template>
export default {
data() {
return {
menuList: [],
props: {
children: 'children',
label: 'title'
},
isExpand: false,
isSelectAll: false,
selectKeys: []
}
},
methods: {
handleExpand(val) {
const nodes = this.$refs.tree.store.nodesMap
for (const i in nodes) {
nodes[i].expanded = val
}
},
handleSelectAll(val) {
if (val) {
this.seltAllSelect(this.menuList)
this.$refs.tree.setCheckedKeys(this.selectKeys)
} else {
this.$refs.tree.setCheckedKeys([])
}
},
//递归
seltAllSelect(menuList) {
menuList.forEach(el => {
this.selectKeys.push(el.id)
if (el.children && el.children.length > 0) {
this.seltAllSelect(el.children)
}
})
}
}
}
elment UI Tree 树形控件点击展开关闭,全选
最新推荐文章于 2023-09-08 10:26:29 发布