解决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优先加载笔记代码
Sep 30 Javascript
jQuery.ajax 用户登录验证代码
Oct 29 Javascript
加速IE的Javascript document输出的方法
Dec 02 Javascript
JavaScript中的面向对象介绍
Jun 30 Javascript
jquery+javascript编写国籍控件
Feb 12 Javascript
微信小程序 自定义对话框实例详解
Jan 20 Javascript
在javaScript中检测数据类型的几种方式小结
Mar 04 Javascript
jquery实现图片轮播器
May 23 jQuery
vue中使用ueditor富文本编辑器
Feb 08 Javascript
vue.js element-ui tree树形控件改iview的方法
Mar 29 Javascript
简述vue-cli中chainWebpack的使用方法
Jul 30 Javascript
使用layer模态框给新页面传值的方法
Sep 27 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计算title标题相似比的方法
2015/07/29 PHP
PHP设计模式之观察者模式定义与用法示例
2018/08/04 PHP
php设计模式之策略模式应用案例详解
2019/06/17 PHP
jQuery ajax serialize()方法的使用以及常见问题解决
2013/01/27 Javascript
E3 tree 1.6在Firefox下显示问题的修复方法
2013/01/30 Javascript
javascript中强制执行toString()具体实现
2013/04/27 Javascript
js控制表单不能输入空格的小例子
2013/11/20 Javascript
怎么判断js脚本加载完成
2014/02/28 Javascript
浅谈js的setInterval事件
2014/12/05 Javascript
javascript中String对象的slice()方法分析
2014/12/20 Javascript
Javascript基础教程之关键字和保留字汇总
2015/01/18 Javascript
HTML5之WebSocket入门3 -通信模型socket.io
2015/08/21 Javascript
JavaScript中文件上传API详解
2016/04/01 Javascript
AngularJS动态绑定HTML的方法分析
2016/11/07 Javascript
基于JavaScript实现自定义滚动条
2017/01/25 Javascript
Vue.js 60分钟快速入门教程
2017/03/28 Javascript
微信小程序 数据遍历的实现
2017/04/05 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
2020/11/02 Javascript
[48:12]Secret vs Optic Supermajor 胜者组 BO3 第三场 6.4
2018/06/05 DOTA
[01:10]为家乡而战!完美世界城市挑战赛全国总决赛花絮
2019/07/25 DOTA
[01:04:20]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.29
2020/12/02 DOTA
Python编程之属性和方法实例详解
2015/05/19 Python
Python开发最牛逼的IDE——pycharm
2018/08/01 Python
Django数据库连接丢失问题的解决方法
2018/12/29 Python
通过cmd进入python的实例操作
2019/06/26 Python
python实现爬取百度图片的方法示例
2019/07/06 Python
使用Python3 poplib模块删除服务器多天前的邮件实现代码
2020/04/24 Python
Roxy美国官网:澳大利亚冲浪、滑雪健身品牌
2016/07/30 全球购物
锐步美国官方网站:Reebok美国
2018/01/10 全球购物
意大利辅助药品、药物和补品在线销售:FarmaEurope
2020/04/29 全球购物
介绍一下Linux文件的记录形式
2013/09/29 面试题
保安员岗位职责
2013/11/17 职场文书
学校岗位设置方案
2014/01/16 职场文书
甜点店创业计划书
2014/01/27 职场文书
2015年七一建党节活动方案
2015/05/05 职场文书
退税申请报告怎么写
2015/05/18 职场文书