解決element-ui里的下拉多選框 el-select 時(shí),默認(rèn)值不可刪除問(wèn)題
這是一個(gè)項(xiàng)目中常見(jiàn)的需求,el-select 為下拉多選,默認(rèn)值不可刪除,或者指定值不可刪除。
實(shí)現(xiàn)效果:
el-select 如下源碼中 tag closable 屬性為 el-select 的 disabled 屬性,所有明顯不支持。
解決思路(從el-select 的角度來(lái)考慮,其他組件組合的情況暫不考慮)
想要實(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)聽(tīng),當(dāng)操作不可刪除的選項(xiàng)時(shí),el-select 綁定的值中 將之前刪除的選項(xiàng)重新添加到原來(lái)的位置。達(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á)到可控的效果。(這種方式增加了開(kāi)發(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做下記錄,感覺(jué)有一點(diǎn)點(diǎn)復(fù)用意義。其它的參考價(jià)值不大。代碼如下定義了一個(gè)全局的指令,也可以定義在組件里面。
// 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>
// 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) } } })
// style.css .none { display: none; }
補(bǔ)充知識(shí):vue+elementUI+select 選中多個(gè)值,我要?jiǎng)h除其中的一兩個(gè) 方法如下
我就廢話不多說(shuō)了,大家還是直接看代碼吧~
<el-select value-key="moduleCode" multiple filterable allow-create default-first-option @remove-tag='removeTag' v-model="ruleForm.module3" placeholder="請(qǐng)選擇權(quán)限分類(lèi)" 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)值不可刪除問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- element-plus 如何設(shè)置 el-date-picker 彈出框位置
- Vue + Element-ui的下拉框el-select獲取額外參數(shù)詳解
- element-ui 遠(yuǎn)程搜索組件el-select在項(xiàng)目中組件化的實(shí)現(xiàn)代碼
- 詳解element-ui中el-select的默認(rèn)選擇項(xiàng)問(wèn)題
- vue2.0 element-ui中el-select選擇器無(wú)法顯示選中的內(nèi)容(解決方法)
- element-ui el-select下拉框el-date-picker彈出框定位問(wèn)題解決方案(推薦)
相關(guān)文章
vue跳轉(zhuǎn)方式(打開(kāi)新頁(yè)面)及傳參操作示例
這篇文章主要介紹了vue跳轉(zhuǎn)方式(打開(kāi)新頁(yè)面)及傳參操作,結(jié)合實(shí)例形式分析了vue.js跳轉(zhuǎn)實(shí)現(xiàn)方式與參數(shù)接受相關(guān)操作技巧,需要的朋友可以參考下2020-01-01vue3+element-plus?Dialog對(duì)話框的使用與setup?寫(xiě)法的用法
這篇文章主要介紹了vue3+element-plus?Dialog對(duì)話框的使用?與?setup?寫(xiě)法的使用,本文通過(guò)兩種方式結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04詳解vuex之store拆分即多模塊狀態(tài)管理(modules)篇
這篇文章主要介紹了詳解vuex之store拆分即多模塊狀態(tài)管理(modules)篇,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11Vue項(xiàng)目動(dòng)態(tài)加載圖片正確寫(xiě)法
最近做項(xiàng)目的時(shí)候遇到了動(dòng)態(tài)加載圖片的需求,所以這里給大家總結(jié)下,這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目動(dòng)態(tài)加載圖片的正確寫(xiě)法,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04vue插件mescroll.js實(shí)現(xiàn)移動(dòng)端上拉加載和下拉刷新
這篇文章主要介紹了vue插件mescroll.js實(shí)現(xiàn)移動(dòng)端上拉加載和下拉刷新,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03Vue表單驗(yàn)證插件Vue Validator使用方法詳解
這篇文章主要為大家詳細(xì)介紹了Vue表單驗(yàn)證插件Vue Validator使用方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-04-04