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