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

2023-07-18 19:38:03 203

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

实现效果：

el-select如下源码中tagclosable属性为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升级版本的时候，需要重新对源码赋值一份进行修改）

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

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


//index.vue

//main.js

Vue.directive('defaultSelect',{
componentUpdated(el,bindings,vnode){
//valuesv-model绑定值
//options下拉选项
//prop对应options中的value属性
//defaultProp默认值判断属性
//defaultValue默认值判断值
const[values,options,prop,defaultProp,defaultValue]=bindings.value
//需要隐藏的标签索引
constindexs=[]
consttempData=values.map(a=>options.find(op=>op[prop]===a))
tempData.forEach((a,index)=>{
if(a[defaultProp]===defaultValue)indexs.push(index)
})
constdealStyle=function(tags){
tags.forEach((el,index)=>{
if(indexs.includes(index)&&![...el.classList].includes('select-tag-close-none')){
el.classList.add('none')
}
})
}
//设置样式隐藏closeicon
consttags=el.querySelectorAll('.el-tag__close')
if(tags.length===0){
//初始化tags为空处理
setTimeout(()=>{
consttagTemp=el.querySelectorAll('.el-tag__close')
dealStyle(tagTemp)
})
}else{
dealStyle(tags)
}
}
})

//style.css
.none{display:none;}

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

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




methods:{

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

以上这篇解决element-ui里的下拉多选框el-select时,默认值不可删除问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

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

热门推荐

随机推荐