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

自己琢磨半天没解决，看到一篇大佬的文章顿时茅塞顿开，记录一下加深印象
原文路径：https://blog.csdn.net/qq_36356218/article/details/102605332

注意：v-defaultSelect这个是引用的大佬写的main.js或组件内部的Vue.directive定义的方法，第一个值“groupid.value”是select的v-model值，第二个值“options”指的是循环el-option的数组，第三个值“value”记着这个是一个字符串形式传过去的，因为value不像第一个和第二个值是定义过的，第三个值“disabled”也是字符串是指option里边的一个值，我这边默认值是禁止勾选的所以循环options数组的时候给默认值的option加了“disabled：true”，所以最后一个值就当然是“true”了
select代码：

<el-select  v-model="form.groupid" id="selects" v-defaultSelect="[form.groupid,options,'value','disabled',true]"  multiple filterable allow-create default-first-option placeholder="请选择" :disabled="edits">
   <el-option v-for="item in options" :key="item.value" :disabled="item.disabled" :label="item.label" :value="item.value">	 
    </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)
    }
  }
})
————————————————
版权声明：本文为CSDN博主「运动猿」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_36356218/article/details/102605332

完成这些操作以后你会发现你的默认值的close按钮上多了一个none的class，然后css文件或者页面添加

//!important这个后缀最好是加上的哦，不然可能会被优先级比较高的[class*=" el-icon-"], [class^=el-icon-]{display:inline-block}给冲突掉
.none{display:none !important;}

好了搞定，再次感谢大佬
原文路径：https://blog.csdn.net/qq_36356218/article/details/102605332