需求:
前面下拉框选择某个选项(如:1)了,
后面的下拉框不能在有前面选中内容的该选项(即不能在出现1的下拉选项)
【Vue 实现动态循环出的多个select 不能重复选择相同的数据】
注:下面注释的都可以根据需求更改
1、template:
<template>
<div id="app">
<div v-for="(item,index) in dataList" :key="index"> //dataList存储后台数据
<el-select v-model="item.title" style="width:200px">
<el-option
v-for="(item,index) in showCityList(item.title)"
//showCityList本来为cityList,item.title与v-model="item.title"的内容一致
:value="item .value"
:label="item .label"
:key="index"
>{{ item .label }}</el-option>
</el-select>
</div>
</div>
</template>
2、script:
computed: {
showCityList() {
return (val) => {
let newList = JSON.parse(JSON.stringify(this.cityList));
//this.cityList需要过滤的字典
const arr = this.dataList.map(item => { //this.dataList存储的数据
return (item = item.title); //item.title与v-model="item.title"的内容一致
});
newList = newList.filter(item => {
if (val == item.value) {
return item;
} else {
if (arr.indexOf(item.value) == -1) {
return item;
}
}
});
return newList;
};
}
}