element-ui tree树形控件实现全选功能

代码如下：

1、template 代码中：

<el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
<el-tree
    :data="organizationData"
    ref="organizationData"
    show-checkbox
    default-expand-all
    node-key="id"
    :props="defaultProps">
</el-tree>
2、data 代码中：

data() {
    return {
        checkAll: false,
        // 可以根据接口返回数据展示
        organizationData: [
            {
                id: 1,
                label: '一级 1',
                children: [
                    {
                        id: 4,
                        label: '二级 1-1',
                        children: [
                            {
                                id: 9,
                                label: '三级 1-1-1'
                            }, {
                                id: 10,
                                label: '三级 1-1-2'
                            }
                        ]
                    }
                ]
            }, {
                id: 2,
                label: '一级 2',
                children: [
                    {
                        id: 5,
                        label: '二级 2-1'
                    }, {
                        id: 6,
                        label: '二级 2-2'
                    }
                ]
            }, {
                id: 3,
                label: '一级 3',
                children: [
                    {
                        id: 7,
                        label: '二级 3-1'
                    }, {
                        id: 8,
                        label: '二级 3-2'
                    }
                ]
            }
        ],
        // children和label 与接口字段保持一致
        defaultProps: {
            children: 'children',
            label: 'label'
        }
    }
}
3、methods 代码中：

handleCheckAllChange(val) {
    if (this.checkAll) {
        this.$refs.organizationData.setCheckedNodes(this.organizationData);
    } else {
        this.$refs.organizationData.setCheckedKeys([]);
    }
}