Element-ui中tree树形控件全选与取消全选的功能实现

Element-ui中tree树形控件全选与取消全选的功能实现

//树形控件

<div align="right">
       <el-checkbox v-model="checked" @change="checkedAll"/> 全选/反选
</div>
<el-tree :data="vuetree" ref="vuetree" show-checkbox node-key="code" default-expand-all :default-checked-keys="checkedKeys" :props="defaultProps">
</el-tree>

//data里面的内容

vuetree: [],  //存放树形组件的data
checked:false, //checkbox的值
defaultProps: {
	children: 'children',
	label: 'name'
},

//checkbox选择事件

checkedAll(){
        if (this.checked) {
            //全选
            this.$refs.vuetree.setCheckedNodes(this.vuetree);
        }else{
            //取消选中
            this.$refs.vuetree.setCheckedKeys([]);
        }
},

//附
Element-ui文档