elementui el-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:[]
    }
}