Vue3 select循環(huán)多個，選項option不能重復(fù)被選

環(huán)境：vue3+ts+vite+element plus
實現(xiàn)目標：Vue3 select循環(huán)多個，當其中一個option值被選后，其他select里面不能再重復(fù)選擇該option值。第二種，當其中一個option值被選后，其他select里面就不出現(xiàn)被選option的值

第一種：代碼如下

<template>
    <div>
        <form>
            <table>
                <tr>
                    <td v-for="(option, index) in 4" :key="index">
                        <el-select v-model="selectedOptions[index]" placeholder="請選擇" @change="handleSelectChange(index)" clearable>
                            <el-option v-for="item in optionList" :key="item" :label="item.label" :value="item.value" :disabled="isOptionDisabled(item.value, index)"></el-option>
                        </el-select>
                    </td>
                </tr>
            </table>
        </form>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { ElSelect, ElOption } from 'element-plus';

const optionList= [
    { label: '選項1', value: 'option1' },
    { label: '選項2', value: 'option2' },
    { label: '選項3', value: 'option3' },
    { label: '選項4', value: 'option4' },
]
const selectedOptions=ref(<any>['','','',''])
const handleSelectChange=(index: number)=> {
    const selectedValue = selectedOptions[index];
    selectedOptions.value.forEach((value:string, i:number) => {
        if (i !== index && value === selectedValue) {
            selectedOptions[i] = '';
        }
    });
}
const isOptionDisabled=(value: string, currentIndex: number)=> {
    return selectedOptions.value.some((selectedValue, index) => {
        return index !== currentIndex && selectedValue === value;
    });
}
</script>

效果：

第二種：

<template>
    <tr>
        <td v-for="(option, index) in 3" :key="index">
            <el-select v-model="selectedOptions[index]" placeholder="請選擇" clearable>
                <el-option v-for="item in filteredOptions(index)" 
	                :key="item.value" 
	                :label="item.label" 
	                :value="item.value">
                </el-option>
            </el-select>
        </td>
    </tr>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { ElSelect, ElOption } from 'element-plus';

export default defineComponent({
    components: {
        ElSelect,
        ElOption,
    },
    setup() {
        const optionList = ref([
            { label: '選項1', value: 'option1' },
            { label: '選項2', value: 'option2' },
            { label: '選項3', value: 'option3' },
        ]);
        const selectedOptions = ref([] as string[]);

        function filteredOptions(index: number) {
            const selectedValues = selectedOptions.value.filter((value, i) => i !== index);
            return optionList.value.filter(option => !selectedValues.includes(option.value));
        }

        return {
            optionList,
            selectedOptions,
            filteredOptions,
        };
    },
});
</script>

效果：

或者用script setup的寫法

<script lang="ts" setup>
import { ref } from 'vue';
import { ElSelect, ElOption } from 'element-plus';
const optionList=[
        { label: '選項1', value: 'option1' },
        { label: '選項2', value: 'option2' },
        { label: '選項3', value: 'option3' },
    ]
const selectedOptions= ref([] as string[])
const filteredOptions=(index: number)=> {
    const selectedValues = selectedOptions.value.filter((value, i) => i !== index);
    return optionList.filter(option => !selectedValues.includes(option.value));
}
</script>

如果沒有使用UI 框架，el-select 和el-option標簽替換為原生HTML標簽即可文章來源地址http://www.zghlxwxcb.cn/news/detail-692446.html

到了這里，關(guān)于Vue3 select循環(huán)多個，選項option不能重復(fù)被選的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！