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

最近有用到这个功能，借鉴了https://blog.csdn.net/qq_36356218/article/details/102605332 这位大佬的代码

这里讲具体用法

1.在main.js 编写一个自定义指令放在 new Vue外

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)

    }

  }

})

2.在App.vue 中加入一个类  .none{display:none !important;}

3.在页面中使用

                          

                            

                        

数据列表：

options: [{

                    value: '1',

                    label: '黄金糕',

                    disabled:true,

                    }, {

                    value: '2',

                    label: '双皮奶',

                    disabled:false,

                    }, {

                    value: '3',

                    label: '蚵仔煎',

                    disabled:false,

                    }, {

                    value: '4',

                    label: '龙须面',

                    disabled:false,

                    }, {

                    value: '5',

                    label: '北京烤鸭',

                    disabled:false,

                }],

选中的值：

    value1:['1']