VUE3 Elemnt Cascader 级联选择器添加全选

element中的Cascader组件并没有给我们添加全选的选项，可以通过添加按钮选项来实现全选

首先当你获取到数据时，可以通过watch监听，添加一个id=‘all’（可随意定义）的一项数据到数据的开头

ts部分

watch(
    () => optionsData.grouplist,
    () => {
        if (optionsData.grouplist.length > 0 && optionsData.grouplist[0].id !== 'all') {
            optionsData.grouplist.unshift({ title: 全选, id: 'all' });
        }
    }
);

使用v-if当id=‘all’时选项变为全选和全不选按钮，此时全选和全不选可会变成一个选项可以选择此时通过popper-class="cascaderClass"添加一个cascaderClass类名，然后通过scss来把前面的选择框去掉

template部分

<el-cascader
:popper-append-to-body="true"
popper-class="cascaderClass"
v-model="queryParams.group_id"
:options="optionsData.grouplist"
@change="cascaderCha"
collapse-tags
:props="groupCascaderProps">
    <template #default="{ data }">
        <div v-if="data.id == 'all'">
            <el-button type="primary" @click="allCascader">全选</el-button>
            <el-button @click="delCascader">取消全选</el-button>
        </div>
        <div v-else>{{ data.title }}</div>
    </template>
</el-cascader>

scss部分

.cascaderClass {
    .el-cascader-menu:first-child {
        li.el-cascader-node:first-child {
            .el-checkbox {
                display: none;
            }
        }
    }
}

最后就是实现全选和全不选的函数

const allCascader = () => {
    queryParams.group_id = [];
    optionsData.grouplist.forEach((item: { children: any[] }, index: any) => {
        if (item.children) {
            item.children.forEach((y: { id: any }, i: any) => {
                queryParams.group_id.push(y.id);
            });
        }
    });
};
const delCascader = () => {
    queryParams.group_id = [];
};