解决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 相关文章推荐
使用正则替换变量
May 05 Javascript
js 学习笔记(三)
Dec 29 Javascript
异步加载script的代码
Jan 12 Javascript
基于JQuery实现的类似购物商城的购物车
Dec 06 Javascript
js过滤HTML标签以及空格的思路及代码
May 24 Javascript
Js base64 加密解密介绍
Oct 11 Javascript
jquery图片切换实例分析
Apr 15 Javascript
jquery siblings获取同辈元素用法实例分析
Jul 25 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
Sep 13 Javascript
微信小程序用户自定义模版用法实例分析
Nov 28 Javascript
vue中eslintrc.js配置最详细介绍
Dec 21 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
Aug 04 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 错误处理经验分享
2011/10/11 PHP
php中数字、字符与对象判断函数用法实例
2014/11/26 PHP
laravel项目利用twemproxy部署redis集群的完整步骤
2018/05/11 PHP
在 Laravel 项目中使用 webpack-encore的方法
2019/07/21 PHP
javaScript 判断字符串是否为数字的简单方法
2009/07/25 Javascript
解析jQuery与其它js(Prototype)库兼容共存
2013/07/04 Javascript
JQuery的ready函数与JS的onload的区别详解
2013/11/21 Javascript
如何动态的导入js文件具体该怎么实现
2014/01/14 Javascript
bootstrap table 服务器端分页例子分享
2015/02/10 Javascript
JavaScript使用replace函数替换字符串的方法
2015/04/06 Javascript
jquery简单实现外部链接用新窗口打开的方法
2015/05/30 Javascript
Javascript原型链的原理详解
2016/01/05 Javascript
JQUERY的AJAX请求缓存里的数据问题处理
2016/02/23 Javascript
JS面向对象编程详解
2016/03/06 Javascript
Js调用Java方法并互相传参的简单实例
2016/08/11 Javascript
ajax级联菜单实现方法实例分析
2016/11/28 Javascript
关于foreach循环中遇到的问题小结
2017/05/08 Javascript
javascript+css3开发打气球小游戏完整代码
2017/11/28 Javascript
jQuery pagination分页示例详解
2018/10/23 jQuery
vue.js实现回到顶部动画效果
2019/07/31 Javascript
vue3实现v-model原理详解
2019/10/09 Javascript
解决vant title-active-color与title-inactive-color不生效问题
2020/11/03 Javascript
python常规方法实现数组的全排列
2015/03/17 Python
python字符串,数值计算
2016/10/05 Python
python利用MethodType绑定方法到类示例代码
2017/08/27 Python
python3+opencv3识别图片中的物体并截取的方法
2018/12/05 Python
Django-xadmin+rule对象级权限的实现方式
2020/03/30 Python
python模拟斗地主发牌
2020/04/22 Python
如何利用Python 进行边缘检测
2020/10/14 Python
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
2020/11/16 HTML / CSS
服务质量承诺书
2014/03/27 职场文书
2015年公务员转正工作总结
2015/04/24 职场文书
详解Html5项目适配系统深色模式方案总结
2021/04/14 HTML / CSS
Python源码解析之List
2021/05/21 Python
使用CSS3实现按钮悬停闪烁动态特效代码
2021/08/30 HTML / CSS
Js类的构建与继承案例详解
2021/09/15 Javascript