两个select下拉框，不能选择相同的值

Question

element 有两个select下拉框，下拉数据都是一模一样,需求是不能同时选择相同的值，请问如何实现，谢谢各位

<template>
  <el-select v-model="value1" placeholder="请选择1">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
    <el-select v-model="value2" placeholder="请选择2">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
  export default {
    data() {
      return {
        options1: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }],
        
        value1: ''
        value2: ''
        
      }
    }
  }
</script>

Answer 1

为已被选择的添加一个disabled禁用状态属性

Answer 2

使用disabled

<template>
  <el-select v-model="value1" placeholder="请选择1">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :disabled="item.value === value2"
      :value="item.value">
    </el-option>
  </el-select>
  <el-select v-model="value2" placeholder="请选择2">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :disabled="item.value === value1"
      :value="item.value">
    </el-option>
  </el-select>
</template>