溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下element-ui里的下拉多選框 el-select 時,默認值不可刪除的解決方法，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！
這是一個項目中常見的需求，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="請選擇權限分類" >
<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 時,默認值不可刪除的解決方法有了一定的了解，想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
