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>

标签：vue,language,title,hasSelect,选择项,languages,antDesign,select
来源： https://www.cnblogs.com/lindang/p/14239834.html