這是一個項目中常見的需求，el-select 為下拉多選，默認值不可刪除，或者指定值不可刪除。
實現(xiàn)效果：
el-select 如下源碼中 tag closable 屬性為 el-select 的 disabled 屬性，所有明顯不支持。
解決思路（從el-select 的角度來考慮，其他組件組合的情況暫不考慮）
想要實現(xiàn)某些選項是不刪除，1、需要tag 不可刪除，2、options 不可選擇
options 不可選擇很好實現(xiàn)，只需要給一個disabled屬性。tag 不可刪除才是關(guān)鍵。下面是我?guī)追N解決思路。
1、 watch 進行監(jiān)聽，當(dāng)操作不可刪除的選項時，el-select 綁定的值中 將之前刪除的選項重新添加到原來的位置。達到不可刪除的效果。（這種方法雖然可以實現(xiàn)，但是tag上還是會有 “x” 會給用戶一種誤導(dǎo)）
2、使用樣式，定位到 tag中，將icon “x” 設(shè)置 display：none； 將關(guān)閉 按鈕隱藏，達到不可刪除的效果。
3、復(fù)制一份 element-ui 中 el-select 源碼 進行少量的修改，給 tag 添加一個 closagle 的屬性。達到可控的效果。（這種方式增加了開發(fā)維護成本，當(dāng)項目中 element-ui 升級版本的時候，需要重新對源碼賦值一份進行修改）
4、使用 derictive 給 element-ui 中 tag 添加樣式，實際上是對思路二的一種實現(xiàn)。
思路是這么一個思路，也對思路1和4進行了實現(xiàn)。但是綜合考慮下，還是針對思路4做下記錄，感覺有一點點復(fù)用意義。其它的參考價值不大。代碼如下定義了一個全局的指令，也可以定義在組件里面。
|
1
2
3
4
5
6
7
8
9
10
11
|
// 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> |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
// main.js vue.directive('defaultselect', { componentupdated (el, bindings, vnode) { // values v-model 綁定值 // options 下拉選項 // prop 對應(yīng) 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') } }) } // 設(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) } }}) |
|
1
2
|
// style.css .none { display: none; } |
補充知識：vue+elementui+select 選中多個值，我要刪除其中的一兩個 方法如下
我就廢話不多說了，大家還是直接看代碼吧~
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<el-select value-key="modulecode" multiple filterable allow-create default-first-option @remove-tag='removetag' v-model="ruleform.module3" placeholder="請選擇權(quán)限分類" 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 時,默認值不可刪除問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持服務(wù)器之家。
原文鏈接：https://blog.csdn.net/qq_36356218/article/details/102605332
