解决解决element-ui里的下拉多选框里的下拉多选框 el-select 时时,默认值不可删除默认值不可删除
问题问题
主要介绍了解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题，具有很好的参考价值，希望对大
家有所帮助。一起跟随小编过来看看吧
这是一个项目中常见的需求，el-select 为下拉多选，默认值不可删除，或者指定值不可删除。
实现效果：实现效果：
el-select 如下源码中 tag closable 属性为 el-select 的 disabled 属性，所有明显不支持。
解决思路解决思路（从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 升级版本的时候，需要重新对源码赋值一份进行修改）
评论0