el禁止已选中select删除指令

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为数组