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

还有一种就是直接给tree返回来的数据加个全选的数据就可以了
data里面的

 listTree:[] //菜单全选tree数据

html

<el-form-item prop="sectionUserPoList" label="菜单权限">
                    <el-tree
                            v-model="dialogForm.sectionUserPoList"
                            class="ztree"
                            accordion
                            :data="listTree"
                            show-checkbox
                            ref="tree"
                            node-key="sectionCode"
                            :default-expanded-keys="[0]" //默认展示全选，如下图
                            :default-checked-keys="sectionColumnsCheckedList"
                            :props="defaultProps"
                            @check-change="handleCheckChange"
                            @check="handleCheckedSectionColumns"
                    >
                    </el-tree>
                </el-form-item>

image.png

方法 methods

//获取版块栏目联动数据
            getTreeDate(){
                selectSectionColumnApi.getallSectionAndColumnByStatusList().then(res=>{
                    if(res.status===0){
                        this.listTree=[{
                                sectionName: '全选',
                                sectionCode:0,//默认展开用的
                                sectionColumns: res.data || []
                            }]
                        console.log(this.listTree);
                    }
                }) .catch((error) => {
                    console.log('/sectionColumnMsg/selectAllSectionAndColumn', error)
                });
            },

Element-ui中tree树形控件全选与取消全选的功能实现（checkbox那种形式而不是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([]);
        }
}