郑州专门做网站,类似淘宝的网站怎么做的,做网站公司怎么赚钱,服装在线设计平台Vue3 select循环多个#xff0c;选项option不能重复被选
环境#xff1a;vue3tsviteelement plus 实现目标#xff1a;Vue3 select循环多个#xff0c;当其中一个option值被选后#xff0c;其他select里面不能再重复选择该option值。第二种#xff0c;当其中一个option值…Vue3 select循环多个选项option不能重复被选
环境vue3tsviteelement plus 实现目标Vue3 select循环多个当其中一个option值被选后其他select里面不能再重复选择该option值。第二种当其中一个option值被选后其他select里面就不出现被选option的值
第一种代码如下
templatedivformtabletrtd v-for(option, index) in 4 :keyindexel-select v-modelselectedOptions[index] placeholder请选择 changehandleSelectChange(index) clearableel-option v-foritem in optionList :keyitem :labelitem.label :valueitem.value :disabledisOptionDisabled(item.value, index)/el-option/el-select/td/tr/table/form/div
/templatescript langts 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 selectedOptionsref(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
效果 第二种
templatetrtd v-for(option, index) in 3 :keyindexel-select v-modelselectedOptions[index] placeholder请选择 clearableel-option v-foritem in filteredOptions(index) :keyitem.value :labelitem.label :valueitem.value/el-option/el-select/td/tr
/templatescript langts
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 langts 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标签即可
