ElementUI中 el-select 多选框设置的默认值旁边的el-tag__close图标不显示

刚开始，给el-option增加样式类，影响不了输入框里已选中的样式，后来查找之后发现了两位大佬的文章。
原文路径：

element-ui el－select多选默认值不允许编辑删除

element-ui里面的下拉多选框 el－select 时，默认值不可删除_elementui的下拉多选删不掉-CSDN博客

效果图： 

代码部分：

index.vue

 <el-select v-model="ruleForm.namespace" v-defaultSelect="[ruleForm.namespace,namespaceListNew,'id','isDefault',true]" multiple filterable  @query-search="handleSearchSchemes" @change="handleSelectChange">
     <el-option v-for="item in namespaceListNew" :key="item.id" :value="item.id" :label="item.name" :class="item.isDefault == true?'disableDelete':''"></el-option>
 </el-select>

main.js (来自原文章）

// 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)
    }
  }
})

样式

.none{
  display:none !important;
}