最近有用到這個功能，借鑒了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?對應(yīng)?options?中?的?value?屬性
????//?defaultProp?默認(rèn)值判斷屬性?
????//?defaultValue?默認(rèn)值判斷值
????const?[values,?options,?prop,?defaultProp,?defaultValue]?=?bindings.value
????//?需要隱藏的標(biāo)簽索引
????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')
????????}
??????})
????}
????//?設(shè)置樣式?隱藏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>
數(shù)據(jù)列表：
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']
