vue+antDesign 多個select下拉組件實現已選擇項不可用（置灰）

vue+antDesign 多個select下拉組件實現已選擇項不可用（置灰）

data

 data() {
    return {

　　　　languages: [
        {language: 'zh', title: '中文'},
        {language: 'en', title: '英文'},
        {language: 'ja', title: '日文'}
      ],

　　　　addErrForm: {
　　　　 desc: []
　　　　}
　　 };
 },

利用計算屬性來實現

computed: {
    hasSelect() {
      const hasSelect = {};
      this.languages.forEach((it) => {
        if (it.language !== undefined) hasSelect[it.language] = true;
      });
      return hasSelect;
    },
  }

使用 使用v-if和disabled屬性來實現已經被選擇的語言項置灰效果

<a-form-model-item
      label="多語言"
      prop="desc"
      v-for="(item, index) in addErrForm.desc"
      :key="index"
    >
      <a-select
        v-model="item.id"
        style="width: 120px"
        placeholder="請選擇語種"
      >
        <a-select-option
          v-for="option in languages"
          :key="option.language"
          :value="option.language"
          :disabled="hasSelect[option.language] && item.id !== option.language"
          >{{ option.title }}</a-select-option
        >
      </a-select>
    </a-form-model-item>