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代码:


   	 
    

把大佬写的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

你可能感兴趣的:(问题记录)