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


Posted in Javascript onAugust 14, 2020

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

实现效果:

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

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

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

解决思路(从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
 
 <el-select v-model="ruleForm.ability" multiple placeholder="请选择">
	<el-option
	 v-for="(item, index) in abilityOptions"
	 :key="index"
	 :label="`${item.abilityNameZh}(${item.abilityId})`"
	 :disabled="item.required === 1"
	 :value="item.abilityId">
	</el-option>
 </el-select>
// 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 选中多个值,我要删除其中的一两个 方法如下

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

<el-select value-key="moduleCode"
      multiple filterable
      allow-create default-first-option
      @remove-tag='removeTag'
      v-model="ruleForm.module3" placeholder="请选择权限分类" style="width: 240px">
 <el-option v-for="item in level3" :value="item" :label="item.moduleName" :key="item.moduleCode"></el-option>
</el-select>
methods:{

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

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

Javascript 相关文章推荐
javascript操作excel生成报表全攻略
May 04 Javascript
jQuery判断数组是否包含了指定的元素
Mar 10 Javascript
正则表达式,替换所有HTML标签的简单实例
Nov 28 Javascript
在vue中安装使用vux的教程详解
Sep 16 Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
Dec 07 Javascript
为什么要使用Vuex的介绍
Jan 19 Javascript
javascript自定义日期比较函数用法示例
Jul 22 Javascript
mock.js模拟数据实现前后端分离
Jul 24 Javascript
Cordova(ionic)项目实现双击返回键退出应用
Sep 17 Javascript
p5.js临摹旋转爱心
Oct 23 Javascript
Nuxt的路由动画效果案例
Nov 06 Javascript
原生JavaScript实现五子棋游戏
Nov 09 Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
Aug 14 #Javascript
vue在App.vue文件中监听路由变化刷新页面操作
Aug 14 #Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
Aug 14 #Javascript
在vue中封装方法以及多处引用该方法详解
Aug 14 #Javascript
JS+css3实现幻灯片轮播图
Aug 14 #Javascript
浅谈vue获得后台数据无法显示到table上面的坑
Aug 13 #Javascript
vue 解决data中定义图片相对路径页面不显示的问题
Aug 13 #Javascript
You might like
PHP数组编码gbk与utf8互相转换的两种方法
2016/09/01 PHP
TP5(thinkPHP5)框架使用ajax实现与后台数据交互的方法小结
2020/02/10 PHP
利用javascript/jquery对上传文件格式过滤的方法
2009/07/25 Javascript
JavaScript与Div对层定位和移动获得坐标的实现代码
2010/09/08 Javascript
分享20款好玩的jQuery游戏
2011/04/17 Javascript
js关闭子窗体刷新父窗体实现方法
2012/12/04 Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
2014/12/20 Javascript
js实现跨域的多种方法
2015/12/25 Javascript
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
2015/12/31 Javascript
获取阴历(农历)和当前日期的js代码
2016/02/15 Javascript
学习使用Bootstrap栅格系统
2017/05/11 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
2017/05/17 Javascript
在vue中给列表中的奇数行添加class的实现方法
2018/09/05 Javascript
JS实现简单的点赞与踩功能示例
2018/12/05 Javascript
jQuery实现左右两个列表框的内容相互移动功能示例
2019/01/27 jQuery
python使用pyhook监控键盘并实现切换歌曲的功能
2014/07/18 Python
简单谈谈Python流程控制语句
2016/12/04 Python
python3 发送任意文件邮件的实例
2018/01/23 Python
python实现将读入的多维list转为一维list的方法
2018/06/28 Python
python安装scipy的方法步骤
2019/06/26 Python
Pandas对DataFrame单列/多列进行运算(map, apply, transform, agg)
2020/06/14 Python
基于HTML5+Webkit实现树叶飘落动画
2017/12/28 HTML / CSS
StubHub中国:购买和出售全球活动门票
2020/01/01 全球购物
将一个数的从第5位开始的7个数取出,其余位置0
2016/05/26 面试题
研修第一天随笔感言
2014/02/15 职场文书
双方协议书
2014/04/22 职场文书
护士感人事迹
2014/05/01 职场文书
优秀党务工作者事迹材料
2014/05/07 职场文书
银行先进个人事迹材料
2014/05/11 职场文书
老干部工作先进集体事迹材料
2014/05/21 职场文书
市贸粮局召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
西柏坡导游词
2015/02/05 职场文书
如何用python插入独创性声明
2021/03/31 Python
浅谈Redis在直播场景的实践方案
2021/04/27 Redis
CPU不支持Windows11系统怎么办
2021/11/21 数码科技
Java9新特性之Module模块化编程示例演绎
2022/03/16 Java/Android