第一次记录
需求:是第一组选完下拉框,第二组里面的下拉框就不能选,第二组选完下拉框,第三组里面的下拉框就不能选第一组和第二组的下拉内容,每组带一个删除按钮,删除完自己组的,数据是可以被其他组选择,以此类推
代码:
<template>
<div>
<div v-for="(items, indexs) in selectList" :key="indexs">
<el-select
v-model="items.one"
placeholder="请选择"
@change="aaa(items.one)"
>
<el-option
v-for="(item, index) in cities"
:key="index"
:label="item.label"
:disabled="item.disabled"
:value="item.value"
>
</el-option>
</el-select>
<el-select
v-model="items.two"
placeholder="请选择"
collapse-tags
@remove-tag="qqq(items.two)"
multiple
>
<el-option
v-for="(item, index) in cities"
:key="index"
:label="item.label"
:disabled="item.disabled"
:value="item.value"
>
<span style="float: left">{{ item.label }}</span>
<span
style="float: right; color: #8492a6; font-size: 13px"
@click="bbb(index)"
>XXX</span
>
</el-option>
</el-select>
<el-button @click="ccc(indexs)">删除</el-button>
</div>
<el-button @click="ddd">添加</el-button
><el-button @click="eee">提交</el-button>
</div>
</template>
<script>
export default {
data() {
return {
cities: [{
value: 'Beijing',
label: '北京',
disabled: false
}, {
value: 'Shanghai',
label: '上海',
disabled: false
}, {
value: 'Nanjing',
label: '南京',
disabled: false
}, {
value: 'Chengdu',
label: '成都',
disabled: false
}, {
value: 'Shenzhen',
label: '深圳',
disabled: false
}, {
value: 'Guangzhou',
label: '广州',
disabled: false
}],
selectList: [{
one: '',
two: ''
},],
aa: []
}
},
mounted() {
},
methods: {
aaa(val) {
this.cities.forEach((it2) => {
if (it2.value == val) {
it2.disabled = true
}
})
},
bbb(index) {
this.cities[index].disabled = false
},
ccc(index) {
let aa = []
let bb = this.selectList[index].one.split()
Object.assign(aa, [...bb], [... this.selectList[index].two])
this.cities.forEach((it2) => {
if (aa.indexOf(it2.value) != -1) {
it2.disabled = false
}
})
this.selectList.splice(index, 1)
},
ddd() {
this.selectList.push({
one: '',
two: ''
})
},
eee() {
console.log(this.selectList);
},
qqq() {
},
},
watch: {
selectList: {
handler() {
this.aa = []
this.selectList.forEach((it) => {
let bb = it.one.split()
this.aa.push(...bb)
this.aa.push(...it.two)
this.cities.forEach((it2) => {
if (this.aa.indexOf(it2.value) != -1) {
it2.disabled = true
} else {
it2.disabled = false
}
})
})
},
deep: true
},
},
}
</script>