首页 > 其他分享 >el禁止已选中select删除指令

el禁止已选中select删除指令

时间:2023-05-17 14:48:13浏览次数:43  
标签:dealStyle el const 删除 index 选中 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为数组

标签:dealStyle,el,const,删除,index,选中,select
From: https://www.cnblogs.com/Sultan-ST/p/17408660.html

相关文章