這是一個專案中常見的需求，el-select 為下拉多選，預設值不可刪除，或者指定值不可刪除。

實現效果：

el-select 如下原始碼中 tag closable 屬性為 el-select 的 disabled 屬性，所有明顯不支援。

解決思路（從el-select 的角度來考慮，其他元件組合的情況暫不考慮）

想要實現某些選項是不刪除，1、需要tag 不可刪除，2、options 不可選擇

options 不可選擇很好實現，只需要給一個disabled屬性。tag 不可刪除才是關鍵。下面是我幾種解決思路。

1、 watch 進行監聽，當操作不可刪除的選項時，el-select 繫結的值中 將之前刪除的選項重新新增到原來的位置。達到不可刪除的效果。（這種方法雖然可以實現，但是tag上還是會有 “x” 會給使用者一種誤導）

2、使用樣式，定位到 tag中，將icon “x” 設定 display：none； 將關閉 按鈕隱藏，達到不可刪除的效果。

3、複製一份 element-ui 中 el-select 原始碼 進行少量的修改，給 tag 新增一個 closagle 的屬性。達到可控的效果。（這種方式增加了開發維護成本，當專案中 element-ui 升級版本的時候，需要重新對原始碼賦值一份進行修改）

4、使用 derictive 給 element-ui 中 tag 新增樣式，實際上是對思路二的一種實現。

思路是這麼一個思路，也對思路1和4進行了實現。但是綜合考慮下，還是針對思路4做下記錄，感覺有一點點複用意義。其它的參考價值不大。程式碼如下定義了一個全域性的指令，也可以定義在元件裡面。

 
// index.vue
 
 <el-select v-model="ruleForm.ability" multiple placeholder="請選擇">
	<el-option
	 v-for="(item,index) in abilityOptions"
	 :key="index"
	 :label="`${item.abilityNameZh}(${item.abilityId})`"
	 :disabled="item.required === 1"
	 :value="item.abilityId">
	</el-option>
 </el-select>

// 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)
  }
 }
})

// style.css 
.none { display: none; }

補充知識：vue+elementUI+select 選中多個值，我要刪除其中的一兩個 方法如下

我就廢話不多說了，大家還是直接看程式碼吧~

<el-select value-key="moduleCode"
      multiple filterable
      allow-create default-first-option
      @remove-tag='removeTag'
      v-model="ruleForm.module3" placeholder="請選擇許可權分類" style="width: 240px">
 <el-option v-for="item in level3" :value="item" :label="item.moduleName" :key="item.moduleCode"></el-option>
</el-select>
methods:{

removeTag(key){
 console.log(key);//獲取option中item
}
}

以上這篇解決element-ui裡的下拉多選框 el-select 時,預設值不可刪除問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。