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

这里讲具体用法

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']