最近遇到一個(gè)需求病涨，頁(yè)面有新增和編輯兩個(gè)功能居夹，但是編輯的時(shí)候只能添加新的選項(xiàng)幔烛，不可刪除已新增的選項(xiàng)荆忍。
不可刪除已新增的選項(xiàng)格带，要做到兩點(diǎn)：
- el-option不可操作
- tag不可刪除
不能選中下拉框好實(shí)現(xiàn)，直接給el-option設(shè)置disabled屬性即可东揣。而el-select設(shè)置multiple屬性后践惑，選中的值會(huì)放入el-tag中，但源碼里el-tag的disabled沒(méi)有暴露出來(lái)嘶卧，可以通過(guò)給el-tag添加class尔觉，直接把刪除圖標(biāo)隱藏掉，這樣用戶就沒(méi)地方點(diǎn)刪除了哈哈芥吟。
一侦铜、添加自定義指令：
import Vue from "vue";
Vue.directive("defaultSelect", {
componentUpdated (el, bindings) {
const [defaultValues] = bindings.value
const dealStyle = function (tags) {
// 因?yàn)椴豢蓜h除原有值，所以原有值的index是不會(huì)變的钟鸵，也就是將前n個(gè)tag的close隱藏掉即可钉稍。n即已有值的長(zhǎng)度defaultValues.length
tags.forEach((el, index) => {
if (index<=defaultValues.length-1 && ![...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)
}
}
});
二、調(diào)用v-defaultSelect
<el-select
multiple
v-model="form.food"
v-defaultSelect="[selectedFood]">
<template>
<el-option
v-for="item in foodEnum"
:key="item.value"
:disabled="selectedFood.indexOf(item.food)>-1"
:label="item.label"
:value="item.value">
</el-option>
</template>
</el-select>
data() {
return {
selectedFood: [0,1,2] // 已有值棺耍，打開(kāi)編輯頁(yè)面調(diào)接口時(shí)拿到
}
}
添加css
調(diào)用v-defaultSelect指令后贡未，el-tag就會(huì)自動(dòng)添加.none類
.none {
display: none !important;
}
