element-ui里面的下拉多选框 el－select 根据一个属性选中时不可删除 ，默认值不可删除

el-select 为下拉多选，默认值不可删除，或者指定值不可删除。

实现效果：
解决思路：使用vue的自定义指令 给 element-ui 中 tag 添加样式

          <el-select 
           :popper-append-to-body="false"
            style="width: 100%;" 
            filterable 
            @change="handleChange" 
            v-model="formData.merchantIds" 
            multiple
            v-default-select="[formData.merchantIds, brandsLists, 'id', 'include', 0]"
            placeholder="请选择">
            <el-option 
              v-for="item in brandsLists" 
              :disabled="item.include == 0"
              :key="item.id" 
              :label="item.name" 
              :value="item.id"
              >
            </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
  setTimeout(() => {
    const tags = el.querySelectorAll('.el-tag__close')
    if (tags.length === 0) {
      // 初始化tags为空处理
        const tagTemp = el.querySelectorAll('.el-tag__close')
        dealStyle(tagTemp)
    } else {
      dealStyle(tags)
    }
  }, 100)
  }
})

// style.css
.none { display: none; }

看到大佬的思路发现正在指令的时候setTimeout的方式要放在更外部 不然获取到的dom元素永远都是更新前的，记录一下
原文路径：https://blog.csdn.net/qq_36356218/article/details/102605332