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文档
————————————————
版权声明:本文为CSDN博主「zq980328」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/zq980328/article/details/87512967

Logo

前往低代码交流专区

更多推荐