最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

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

 更新時(shí)間:2020年08月14日 09:44:51   作者:一起蹦極某囖  
這篇文章主要介紹了解決element-ui里的下拉多選框 el-select 時(shí),默認(rèn)值不可刪除問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

這是一個(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ì)給用戶(hù)一種誤導(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è) 方法如下

我就廢話(huà)不多說(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è)參考,也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論

泗阳县| 汉沽区| 正定县| 德昌县| 六安市| 上高县| 华蓥市| 清新县| 稻城县| 平乐县| 忻州市| 博乐市| 洞口县| 襄垣县| 阿合奇县| 土默特右旗| 祥云县| 江津市| 闸北区| 南郑县| 平阴县| 黔西| 临朐县| 桃园县| 武冈市| 江孜县| 鹤山市| 衡水市| 桐梓县| 昌平区| 左权县| 沈阳市| 敦化市| 浪卡子县| 饶河县| 桐庐县| 安国市| 卓尼县| 台南市| 红河县| 若羌县|