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

最新推荐文章于 2025-03-03 16:29:59 发布

kun里kun气

最新推荐文章于 2025-03-03 16:29:59 发布

阅读量1.1k

点赞数 2

文章标签：前端 javascript html elementui vue.js

本文链接：https://blog.youkuaiyun.com/kunikunkunikun/article/details/134837315

版权

本文介绍了如何在ElementUI的Cascader组件中添加全选和全不选功能，通过watch监听数据变化，动态添加标识符all，并利用v-if控制显示，以及自定义CSS隐藏默认选择框。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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=