element-ui中 tree
树形控件的相关功能,演示图:
代码部分:
<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
实现,就不用两个函数啦