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=