Vue3 select循环多个，选项option不能重复被选-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue3 select循环多个，选项option不能重复被选。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Vue3 select循环多个，选项option不能重复被选

环境：vue3+ts+vite+element plus
实现目标：Vue3 select循环多个，当其中一个option值被选后，其他select里面不能再重复选择该option值。第二种，当其中一个option值被选后，其他select里面就不出现被选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>

效果：
Vue3 select循环多个，选项option不能重复被选,Vue3,vue3,select option,element-plus
第二种：

<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>

效果：
Vue3 select循环多个，选项option不能重复被选,Vue3,vue3,select option,element-plus
或者用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>