首页 > 其他分享 >elementui el-select设置默认值且默认值不允许删除

elementui el-select设置默认值且默认值不允许删除

时间:2023-09-03 09:12:21浏览次数:60  
标签:el Vue tags elementui close 默认值 select

参考网址:【记录】el-select 已选项禁止删除 el-select编辑时已选择的项不允许删除element-ui里面的下拉多选框 el-select 时,默认值不可删除

在项目中 el-select 设置默认值且默认值不允许删除和取消选中

通过vue全局指令实现该要求

export default {
	update(el, bindings) {
		const [defaultValues, selectValue] = bindings.value
		// 需要隐藏的标签索引
		const indexs = []
		selectValue.map((item, index) => {
			defaultValues.map(defaultItem => {
				if (item == defaultItem) {
					indexs.push(index)
				}
			})
		})
		const dealStyle = function(tags) {
			tags.forEach((el, index) => {
				if (
					indexs.includes(index) &&
					![...el.classList].includes('select-tag-close-none')
				) {
					el.style.display = 'none' // close 图标隐藏掉
				}
			})
		}
		// 设置样式隐藏close icon
		let tags = el.querySelectorAll('.el-tag__close')

		if (tags.length === 0) {
			// 初始化tags为空处理
			setTimeout(() => {
				let tagTemp = el.querySelectorAll('.el-tag__close')
				dealStyle(tagTemp)
			})
		} else {
			setTimeout(() => {
				dealStyle(tags)
			})
		}
	}
}

 

指令文件夹下新建index.js文件

import defaultSelect from './select/defaultSelect'

const install = function(Vue) {
    // Vue.directive('xxx', xxx)        // 其他指令
    Vue.directive('defaultSelect', defaultSelect)
}    

if (window.Vue) {
  Vue.use(install)
}

export default install

 

在main.js 导入指令

import directive from './directive'

Vue.use(directive)

 

在页面中使用指令

// 设置已选择的不可删除 selectIdList:选中值数组[1,2,3]    form.selectId选中值id字符串,逗号分割 1,2,3
v-default-select="[selectIdList,form.selectId]" 
// 设置已选择的不可操作
:disabled=“selectIdList.includes(dict.value)” 
<el-select
   ref="efficacyIdSelect"
   v-model="form.selectId"
   v-default-select="[selectIdList,form.selectId]"
   multiple
   filterable
   placeholder="请选择"
   class="select-width"
   @keydown.native.delete.capture.stop.prevent
   @change="$forceUpdate()">
      <el-option
          v-for="dict in dict.List"
          :key="dict.value"
          :label="dict.label"
          :value="dict.value"
          :disabled="selectIdList.includes(dict.value)" />
</el-select>

data(){
	return {
		form:{},
		selectIdList:[]
	}
}

标签:el,Vue,tags,elementui,close,默认值,select
From: https://www.cnblogs.com/Intellectualscholar/p/17661604.html

相关文章

  • python: excel 换行符(_x000D_)
     data4=dataframe1.loc[4:34]foridx,datavalueindata4.iterrows():#strnum=Common.Utils.Utils.getAnnualLeave(data)print("[{}]:{}".format(idx,datavalue))slist=datavalue.tolist()hbll=BLL.EmpLoyeeHo......
  • sleep、yield、join方法简介与用法 sleep与wait区别 多线程中篇
    转sleep、yield、join方法简介与用法sleep与wait区别多线程中篇1.sleep不会释放锁,不会释放锁,不会释放锁 所以对于sleep方法,要么自己醒来,要么被中断后也会醒来 yield也是静态方法,所以,也是针对于当前线程,当前线程,当前线程。  2.主线程main中调用启动线程(调用start),......
  • WPF ComboBox SelectionChanged 重复执行的问题
    参考:WPFTabControlSelectionChanged重复执行的问题-一!雨-博客园(cnblogs.com)添加如下代码privatevoidComboBox_SelectionChanged(objectsender,SelectionChangedEventArgse){e.Handled=true;} 如果采用MVVM模式,在当前......
  • 向量搜索技术:基于Elasticsearch/PostgreSQL/Redis扩展的向量搜索数据库或独立向量搜索
    理论基础与研究向量数据库用于非结构化文本、图片、音频、视频搜索、推荐,将他们转换为数字向量表示来进行相似性(ANN)搜索。存储和搜索高维向量是其特征之一,通常采用高级索引技术和算法如HNSW,Annoy,或Faiss来实现。不同于SQL数据库,向量数据库更像nosql,用户接受使用sdk/API......
  • celery 异步任务
    最近在搭建python测开平台新get的一个知识点,celery的使用,在此记录一下1.安装环境pipinstallcelerpipinstallcelery2.认识一下celery(1)简介:Celery是使用python编写的分布式任务调度框架,在我们日常web应用中,请求一个后端接口就是等待该接口的业务完成后再返回,如果接口......
  • C++ Core Guidelines解析 电子书 pdf
    关注公众号:红宸笑。回复:电子书即可  在《C++CoreGuidelines解析》中,C++专家讲师RainerGrimm提炼出了CoreGuidelines中的精髓,去除了晦涩难懂的内容,分享了新的见解和背景,并提供了自己培训课程中经过充分测试的示例。对于使用C++11及后续版本C++的有经验程序员,G......
  • Pinely Round 2 (Div. 1 + Div. 2)
    Preface唉懒狗了这把比赛的时候突然不想打了跑去看AIR了,所以就没打了,后面补题的时候发现前面题挺合我口味的如果打了大概率能上橙不过这种第二天早上有早八的时间还是很难打的,苦路西苦路西A.Channel统计当存在某个时刻在线人数为\(n\)时就是YES否则把所有的+加起来看看是否......
  • Xshell永久安装完全指南:畅享所有高级功能
    前言Xshell是一款功能强大的SSH远程终端客户端。Xshell支持远程协议Telnet、Rlogin、SSH/SSHPKCS,主要用于在Windows系统上远程操控服务器进行工作以及统一管理多台服务器集群,它通过多种不同的连接协议和密码,保障着用户的连接服务器安全。一、安装xshell安装包在文末附带,并提供了免......
  • elementui 长表单验证滚动到首个错误位置
    this.$refs['form'].validate(valid=>{if(valid){//验证通过}else{//验证失败this.$nextTick(()=>{letisError=document.getElementsByClassName('is-error') isError[0].......
  • 2、Vue中安装element-plus
    1、在项目终端命令行中输入:pnpminstallelement-plus--save 2、项目中导入elementimportElementPlusfrom'element-plus'import'element-plus/dist/index.css' 3、使用element组件 ......