一.利用Option Group Attributes中的disabled属性实现
<el-select v-model="value1" placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value":disabled="item.value == value2"> </el-option> </el-select> <el-select v-model="value2" placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value":disabled="item.value == value1"> </el-option> </el-select>
data () { return { options: [{ value: '选项1', label: '黄金糕' }, { value: '选项2', label: '双皮奶', }, { value: '选项3', label: '蚵仔煎' }, { value: '选项4', label: '龙须面' }, { value: '选项5', label: '北京烤鸭' }], value1: '', value2: '', }; },
二.利用下拉框的@change事件
<el-select v-model="value1" placeholder="请选择" @change="value1Change"> <el-option v-for="item in value2Options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> <el-select v-model="value2" placeholder="请选择" @change="value2Change"> <el-option v-for="item in value1Options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select>
data () { return { options: [{ value: '选项1', label: '黄金糕' }, { value: '选项2', label: '双皮奶', }, { value: '选项3', label: '蚵仔煎' }, { value: '选项4', label: '龙须面' }, { value: '选项5', label: '北京烤鸭' }], value1: '', value2: '', value1Options: [], value2Options: [], }; }, mounted () { this.value1Options = this.value2Options = this.options; }, methods: { value1Change (val) { console.log(val); this.value1Options = this.options.filter(item => { return item.value != val; }) console.log(this.value1Options); }, value2Change (val) { this.value2Options = this.options.filter(item => { return item.value != val; }) }, },