带全选项的多选下拉框封装（基于element）

最新推荐文章于 2025-04-07 15:31:52 发布

「已注销」

最新推荐文章于 2025-04-07 15:31:52 发布

阅读量882

点赞数

分类专栏：自定义组件系列文章标签： element vue 下拉多选框

本文链接：https://blog.youkuaiyun.com/qq_34295211/article/details/106532827

版权

业务需求期望多选的下拉框带有全部选择选项，并且全部选择选项和其他的选项为互斥关系，而element中的下拉多选框是没有这种全选功能的，所以需要自己实现。下面我们看一下完成的效果动图：

实现的基本思路就是判断选中项中是否有全部选项，从而对选中项进行过滤。下面是这个多选框组件multi-select.vue的代码：

<template>
    <el-select :placeholder="placeholder" v-model="curOption" filterable :clearable="clearable" multiple :collapse-tags="collapse" :disabled="disabled" :style="{width: width}" @remove-tag="removeTag" @visible-change="$emit('visible-change', $event)" @clear="clear">
        <el-option @click.native="selectOption(item)" v-for="(item, index) in selectList" :key="index" :label="item[op