1 <el-form-item class="mr-4" label="银行名称" prop="bankId"> 2 <el-select v-model="filterForm.bankId" 3 :placeholder="$t(‘selectHint‘)" 4 multiple 5 collapse-tags 6 :clearable=‘true‘> 7 <el-option :label="item.bankName" :value="item.id" v-for="item in banks.data" 8 :key="item.id"></el-option> 9 10 </el-select> 11 </el-form-item>
这是一个选择银行名称的多选框
上面第7行： banks 需要在本class中定义
1 export default class Table extends Vue { 2 banks: any = {}; 3 4 filterForm = { 5 bankId: "", 6 bankIds : {}, 7 8 .......
第5行 bankId 是上面的prop ，这里的filterForm中定义的字段是需要传到后台的
1 if(this.filterForm.bankId !== ‘‘){ 2 this.filterForm.bankIds = this.filterForm.bankId; 3 }else{ 4 this.filterForm.bankIds = []; 5 }
上图：判断是因数 请求后台的banks方法是异常的，在created()函数中，默认会请求后台查询数据，这时bankId 是‘’，会导致后面的bankIds赋值异常
后台：在pojo中增加 private List<Short> bankIds; 用于接收前端的传值，在xml中
1 <if test="bankIds !=null and bankIds.size > 0 "> 2 and d.bankid in 3 <foreach collection="bankIds" item="bankid" open="(" close=")" separator=","> 4 #{bankid,jdbcType=NUMERIC} 5 </foreach> 6 </if>
原文：https://www.cnblogs.com/xiaofan156/p/11673281.html