vue多个el-select共用同一个筛选列表，如何控制一个选择了其他就不能选已经被选择的项了

多个select 共用一个options，且每一个option只能用一次。动态禁用每一个options。

<div class="col-md-12">
  <div class="panel panel-default" style="margin-bottom: 10px">
    <div class="panel-heading">品名适应度</div>
      <div class="panel-body"  style="border-bottom: 1px solid #bcc7dd;">
        <el-form-item label="钻石:" prop="diamonds" size="small">
          <el-select v-model="largeForm.diamonds" multiple placeholder="请选择" style="width: 100%" @change="handleSelect()">
            <el-option
              v-for="item in placeData"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="getDisable(item.value)">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="铂金:" prop="birkin" size="small">
          <el-select v-model="largeForm.birkin" multiple placeholder="请选择"  style="width: 100%" @change="handleSelect()">
            <el-option
              v-for="item in placeData"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="getDisable(item.value)">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="黄金:" prop="gold" size="small">
          <el-select v-model="largeForm.gold" multiple placeholder="请选择"  style="width: 100%" @change="handleSelect()">
            <el-option
              v-for="item in placeData"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="getDisable(item.value)">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="白银:" prop="silver" size="small">
          <el-select v-model="largeForm.silver" multiple placeholder="请选择"  style="width: 100%" @change="handleSelect()">
            <el-option
              v-for="item in placeData"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="getDisable(item.value)">
            </el-option>
          </el-select>
        </el-form-item>
      </div>
  </div>
          

 placeData: {!! $placeData !!},
 selectedOptions: [],

handleSelect(){
  var that =  this;
  var diamonds = that.largeForm.diamonds;
  var birkin   = that.largeForm.birkin;
  var gold     = that.largeForm.gold;
  var silver   = that.largeForm.silver;
  var arr = [];
  for(var i in diamonds){
    arr.push(diamonds[i]);
  }
  for(var i in birkin){
    arr.push(birkin[i]);
  }
  for(var i in gold){
    arr.push(gold[i]);
  }
  for(var i in silver){
    arr.push(silver[i]);
  }
  that.selectedOptions = arr;
},

getDisable(value) {
  var that =  this;
  // console.log(that.selectedOptions);
  if (that.selectedOptions.indexOf(value) >= 0) {
    return true;
  } else {
    return false;
  }
},

另例：

<el-table-column prop="fields" label="映射字段">
   <template #default="scope">
      <el-select filterable v-model="scope.row.select" clearable class="w-full"                 
          @change="selectChange(scope.row.select,scope.$index)">
         <el-option v-for="item in state.tables" :key="item.id" :label="item.name" 
             :value="item.id" :disabled="getDisable(item.id)">
            {{ item.name }}
         </el-option>
       </el-select>
    </template>
 </el-table-column>

const state = reactive({
    tables : [{
      id:1,
      name:'database'
    },
    {
      id:2,
      name:'database2'
    },
    {
      id:3,
      name:'database3'
    }],
    tableData : [{
      id : 1,
      name : '',
      select:'',
    },
    {
      id : 2,
      name : '',
      select:'',
    },
    {
      id : 2,
      name : '',
      select:'',
    }],
    selectedOptions: [],
  });
  const selectChange = (value, index) => {
    console.log(value, index);
    state.selectedOptions[index] = value
  };
  const getDisable = (value) => {
    if (state.selectedOptions.indexOf(value) >= 0) {
        return true;
      } else {
        return false;
      }
  };
  return {
    state, getDisable, selectChange, 
  }