element-ui里的下拉多選框 el-select 時,默認(rèn)值不可刪除的解決方法

 // 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 對應(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)
  }
 }
})

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

<el-select value-key="moduleCode"
      multiple filterable
      allow-create default-first-option
      @remove-tag='removeTag'
      v-model="ruleForm.module3" placeholder="請選擇權(quán)限分類" >
 <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
}
}