elementui多选下拉取消按钮_element-ui里的下拉多选框 el-select 时,默认值不可删除的解决方法...

╰半夏微凉° 2022-11-03 08:11 579阅读 0赞

element-ui里的下拉多选框 el-select 时,默认值不可删除的解决方法

发布时间：2020-08-15 09:30:44

来源：亿速云

阅读：268

作者：小新

小编给大家分享一下element-ui里的下拉多选框 el-select 时,默认值不可删除的解决方法，希望大家阅读完这篇文章后大所收获，下面让我们一起去探讨吧！

这是一个项目中常见的需求，el-select 为下拉多选，默认值不可删除，或者指定值不可删除。

实现效果：

![b38d3f34030a4469e0d2da5d26fcdd60.png][]

el-select 如下源码中 tag closable 属性为 el-select 的 disabled 属性，所有明显不支持。

![d568e3bb2a3a9de485cdeba3c825c1b1.png][]

解决思路(从el-select 的角度来考虑，其他组件组合的情况暂不考虑)

想要实现某些选项是不删除，1、需要tag 不可删除，2、options 不可选择

options 不可选择很好实现，只需要给一个disabled属性。tag 不可删除才是关键。下面是我几种解决思路。

1、 watch 进行监听，当操作不可删除的选项时，el-select 绑定的值中 将之前删除的选项重新添加到原来的位置。达到不可删除的效果。(这种方法虽然可以实现，但是tag上还是会有 “x” 会给用户一种误导)

2、使用样式，定位到 tag中，将icon “x” 设置 display：none； 将关闭 按钮隐藏，达到不可删除的效果。

3、复制一份 element-ui 中 el-select 源码 进行少量的修改，给 tag 添加一个 closagle 的属性。达到可控的效果。(这种方式增加了开发维护成本，当项目中 element-ui 升级版本的时候，需要重新对源码赋值一份进行修改)

4、使用 derictive 给 element-ui 中 tag 添加样式，实际上是对思路二的一种实现。

思路是这么一个思路，也对思路1和4进行了实现。但是综合考虑下，还是针对思路4做下记录，感觉有一点点复用意义。其它的参考价值不大。代码如下定义了一个全局的指令，也可以定义在组件里面。

// index.vue

v-for="(item, index) in abilityOptions"

:key="index"

:label="\`$\{item.abilityNameZh\}($\{item.abilityId\})\`"

:disabled="item.required === 1"

:value="item.abilityId">

// main.js

Vue.directive('defaultSelect', \{

componentUpdated (el, bindings, vnode) \{

// values v-model 绑定值

// options 下拉选项

// prop 对应 options 中 的 value 属性

// defaultProp 默认值判断属性

// defaultValue 默认值判断值

const \[values, options, prop, defaultProp, defaultValue\] = bindings.value

// 需要隐藏的标签索引

const indexs = \[\]

const tempData = values.map(a => options.find(op => op\[prop\] === a))

tempData.forEach((a, index) => \{

if (a\[defaultProp\] === defaultValue) indexs.push(index)

\})

const dealStyle = function (tags) \{

tags.forEach((el, index) => \{

if (indexs.includes(index) && !\[...el.classList\].includes('select-tag-close-none')) \{

el.classList.add('none')

\}

\})

\}

// 设置样式 隐藏close icon

const tags = el.querySelectorAll('.el-tag\_\_close')

if (tags.length === 0) \{

// 初始化tags为空处理

setTimeout(() => \{

const tagTemp = el.querySelectorAll('.el-tag\_\_close')

dealStyle(tagTemp)

\})

\} else \{

dealStyle(tags)

\}

\}

\})

// style.css

.none \{ display: none; \}

补充知识：vue+elementUI+select 选中多个值，我要删除其中的一两个 方法如下

我就废话不多说了，大家还是直接看代码吧~

multiple filterable

allow-create default-first-option

@remove-tag='removeTag'

v-model="ruleForm.module3" placeholder="请选择权限分类" >

methods:\{

removeTag(key)\{

console.log(key);//获取option中item

\}

\}

看完了这篇文章，相信你对element-ui里的下拉多选框 el-select 时,默认值不可删除的解决方法有了一定的了解，想了解更多相关知识，欢迎关注亿速云行业资讯频道，感谢各位的阅读！

[b38d3f34030a4469e0d2da5d26fcdd60.png]: /images/20221024/f88c10d5a5974bbda908b788611ac6e0.png
[d568e3bb2a3a9de485cdeba3c825c1b1.png]: /images/20221024/732c3d55b36c42c3829f9bd5ee96c6b6.png

发表评论取消回复

表情：

评论列表（有 0 条评论，579人围观）

还没有评论，来说两句吧...

相关阅读

相关多选下拉框（select 下拉多选）

选项1</option><option value="2">选项1</option><option value="3">选项1</option><option value...

古城微笑少年丶/ 2024年05月02日 20:21/ 0 赞/ 134 阅读

相关 ElementUI之tree形下拉选

ElementUI之tree形下拉选 vue代码： <el-row> <el-col :span="11"> <el-form-...

朱雀/ 2024年04月18日 06:23/ 0 赞/ 68 阅读

相关 vue elementUI select下拉框设置默认值

关于element select框默认值赋值不成功问题，注意两点： v-model里面的数据和遍历出来value值数据类型不一样。！！！！（例：item.provinc

旧城等待，/ 2023年10月09日 14:25/ 0 赞/ 74 阅读

相关 ElementUI的el-select怎样实现下拉多选并实现给下拉框赋值和获取值

场景要实现的效果如下 ![20200806143553439.gif][] 官方示例代码实现多选为el-select设置multiple属性即可启用多选，此时v

桃扇骨/ 2023年10月06日 14:21/ 0 赞/ 69 阅读

相关 LayUI # 多选下拉框

我的项目中使用的是formSelects-v4.js，但是现在以及对此引用停止更新了。现在提供一下学习网址：[https://hnzzmsf.github.io/examp

迈不过友情╰/ 2023年06月24日 08:10/ 0 赞/ 54 阅读

相关 Html 单选按钮多选按钮下拉列表

![20200611185106301.PNG][] <form action="" method="get"> 姓名：<input type="te

比眉伴天荒/ 2023年02月17日 03:18/ 0 赞/ 15 阅读

相关 jquery获取下拉框多选的值

select下拉框选中的值，用jquery获取 $("selectBox option:selected").val(); 获取多选框的value值，使用遍历最简单

客官°小女子只卖身不卖艺/ 2022年12月25日 12:54/ 0 赞/ 194 阅读

相关 elementui多选下拉取消按钮_element-ui里的下拉多选框 el-select 时,默认值不可删除的解决方法...

element-ui里的下拉多选框 el-select 时,默认值不可删除的解决方法发布时间：2020-08-15 09:30:44 来源：亿速云阅读：268 作者

╰半夏微凉°/ 2022年11月03日 08:11/ 0 赞/ 580 阅读

相关 HTML下拉框多选

HTML下拉框多选 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://

谁践踏了优雅/ 2022年08月20日 12:09/ 0 赞/ 777 阅读

相关 EasyUI单选，多选，下拉框

单选框 <div> <label for="name">性别:</label> <input type="radio"

一时失言乱红尘/ 2022年05月27日 03:24/ 0 赞/ 744 阅读