最近遇到一个需求，页面有新增和编辑两个功能，但是编辑的时候只能添加新的选项，不可删除已新增的选项。
不可删除已新增的选项，要做到两点：
- el-option不可操作
- tag不可删除
不能选中下拉框好实现，直接给el-option设置disabled属性即可。而el-select设置multiple属性后，选中的值会放入el-tag中，但源码里el-tag的disabled没有暴露出来，可以通过给el-tag添加class，直接把删除图标隐藏掉，这样用户就没地方点删除了哈哈。
一、添加自定义指令：
import Vue from "vue";
Vue.directive("defaultSelect", {
componentUpdated (el, bindings) {
const [defaultValues] = bindings.value
const dealStyle = function (tags) {
// 因为不可删除原有值，所以原有值的index是不会变的，也就是将前n个tag的close隐藏掉即可。n即已有值的长度defaultValues.length
tags.forEach((el, index) => {
if (index<=defaultValues.length-1 && ![...el.classList].includes('select-tag-close-none')) {
el.classList.add('none')
}
})
}
// 设置样式 隐藏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)
}
}
});
二、调用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] // 已有值，打开编辑页面调接口时拿到
}
}
添加css
调用v-defaultSelect指令后，el-tag就会自动添加.none类
.none {
display: none !important;
}
