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

路漫漫其修远兮，吾将上下而求索 / 2023-09-03 / 原文

参考网址：【记录】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:[]
	}
}