vue2 + antDesign 下拉框限制只能选择2个

Joe5562026-01-16 18:06

vue2 + antDesign v1开发需求下拉框只能选2项,由于v1版不能使用新版属性直接设置，只能手动修改

a-select手动实现选择2个

组件部分

复制代码

<a-form-model
        ref="ruleFormFitup"
        :model="startForm"
        :rules="rulesStartForm"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }"
      >
        <a-row :gutter="8">

<a-col :span="12">
            <a-form-model-item
              ref="reviewEngineer"
              label="审核工程师"
              prop="reviewEngineer"
              
            >
              <a-select
                v-model="startForm.reviewEngineer"
                placeholder="请选择"
                allowClear
              show-search
              mode="multiple"
              :filter-option="filterOption"
               @change="handleReviewEngineerChange"
              >
                <a-select-option
                  v-for="item in reviewList"
                  :key="item.oaUser"
                  :value="item.oaUser"
                >
                  {{ item.oaUser }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
</a-row>
</a-form-model>

method中限制选择

复制代码

 handleCheckEngineerChange(value) {
      // 限制最多选择2个
      if (value && value.length > 2) {
        // 只保留前两个选项
        this.startForm.checkEngineer = value.slice(0, 2);
      }
    },