import Vue from 'vue'
// 和main.js同级,自定义指令控制select已选的不给删除
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.style.display = '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)
}
}
})
//main引入上述指令文件
import './directive' //禁止删除select
<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>
//使用 v-defaultSelect="[selectedFood]"
// selectedFood为数组
标签:dealStyle,el,const,删除,index,选中,select
From: https://www.cnblogs.com/Sultan-ST/p/17408660.html