标签：vue language title hasSelect 选择项 languages 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。