el-select下拉框重复选择的使用场景:
场景:在用element做下拉框的时候,有时候要对多个下拉框的选择做出限制,例如一个下拉选了,另一个就不能重复选定。这里提供两种方法如下:
第一种方法(设置disabled禁用)
`效果图如下
`
思路:对下拉框的数组每一项设置disabled禁用属性,如果有选过的设置为true。
这里还有一个问题,从未选状态到选择内容a和选择内容a到内容b两者是会影响到对disabled的判断的,所以要使用watch来深度监听数组对应内容的变化
代码如下
<template>
<div>
<el-button type = "primary" size = "small" @click = "add">新增</el-button>
<el-table :data="tableData">
<el-table-column label="选择水果不重复" prop="value">
<template v-slot="scope">
<el-select v-model="scope.row.value">
<el-option v-for="item in options" :key="item.value" :value="item.value" :label="item.label"
:disabled="item.disabled"/>
</el-select>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: "options",
data() {
return {
tableData: [
{value:'1'},
{value:'2'},
],
options: [
{label: '西瓜', value: '1', disabled: true},
{label: '柠檬', value: '2', disabled: true},
{label: '葡萄', value: '3', disabled: false},
{label: '苹果', value: '4', disabled: false},
{label: '香蕉', value: '5', disabled: false},
{label: '火龙果', value: '6', disabled: false},
{label: '凤梨', value: '7', disabled: false},
],
}
},
watch: {
"tableData": {
handler(newArr) {
// 一开始都设置为允许使用
this.options = this.options.map(item=>{
item.disabled = false
return item
})
// 将选过的设置为禁用
newArr.forEach(x=>{
this.options.forEach(y=>{
if(x.value === y.value){
y.disabled = true
}
})
})
},
deep:true
}
},
methods:{
add(){
this.tableData.push({value:''})
}
}
}
</script>
<style scoped>
.el-button{
float:left;
}
.el-select {
width:150px;
margin: 10px;
}
</style>
第二种方法(使用副本数组):
效果图如下
思路:先创建一个下拉框列表数据的副本数组,每次当有下拉框改变时,修改副本里的数据,采用change事件来修改副本
代码如下
<template>
<div>
<el-button type="primary" size="small" @click="add">新增</el-button>
<el-table :data="tableData">
<el-table-column label="选择水果不重复" prop="value">
<template v-slot="scope">
<el-select v-model="scope.row.value" @change="changeOptions">
<el-option v-for="item in myOptions" :key="item.value" :value="item.value" :label="item.label"/>
</el-select>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: "options2",
data() {
return {
tableData: [
{value: ''},
],
options: [
{label: '西瓜', value: '1'},
{label: '柠檬', value: '2'},
{label: '葡萄', value: '3'},
{label: '苹果', value: '4'},
{label: '香蕉', value: '5'},
{label: '火龙果', value: '6'},
{label: '凤梨', value: '7'},
],
myOptions: [
{label: '西瓜', value: '1'},
{label: '柠檬', value: '2'},
{label: '葡萄', value: '3'},
{label: '苹果', value: '4'},
{label: '香蕉', value: '5'},
{label: '火龙果', value: '6'},
{label: '凤梨', value: '7'},
],
}
},
methods: {
add() {
this.tableData.push({value: ''})
},
changeOptions() {
// 需要移除的下标
let pos = []
this.tableData.forEach(item => {
if (item.value) {
pos.push(item.value)
}
})
pos = Array.from(new Set(pos)).sort()
let myOptions = this.options.concat()
// 设置副本数组的数据
for(let i = myOptions.length - 1;i >=0; i--){
for(let j = 0 ;j < pos.length;j++){
if(myOptions[i].value === pos[j]){
myOptions.splice(i,1)
}
}
}
this.myOptions = JSON.parse(JSON.stringify(myOptions))
}
}
}
</script>
<style scoped>
.el-button {
float: left;
}
.el-select {
width: 150px;
margin: 10px;
}
</style>
总结:
如果下拉框的数据较少,建议使用disabled的方式;如果数据量较大,建议用创建副本的方式,再使用远程搜索和分页来解决。