最近有用到这个功能，借鉴了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.在页面中使用
<el-select v-model="value1" id="selects" v-defaultSelect="[value1,options,'value','disabled',true]" multiple placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :disabled="item.disabled" :label="item.label" :value="item.value">
</el-option>
</el-select>
数据列表：
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']
