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"
antdesignvue 表格合计
v-for="(item, index) in addErrForm.desc"
:key="index"
>
<a-select
v-model="item.id"
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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。