vue 前端传数组字段到后台

        <el-form-item class="mr-4" label="银行名称" prop="bankId">
            <el-select v-model="filterForm.bankId" 
                        :placeholder="$t('selectHint')"
                        multiple
                        collapse-tags
                        :clearable='true'>
                <el-option :label="item.bankName" :value="item.id" v-for="item in banks.data"
                            :key="item.id"></el-option>

            </el-select>
        </el-form-item>

这是一个选择银行名称的多选框

上面第7行： banks 需要在本class中定义

export default class Table extends Vue {
  banks: any = {};

  filterForm = {
    bankId: "", 
    bankIds : {},

  .......

第5行 bankId 是上面的prop ，这里的filterForm中定义的字段是需要传到后台的

 

    if(this.filterForm.bankId !== ''){
        this.filterForm.bankIds = this.filterForm.bankId;
    }else{
      this.filterForm.bankIds = [];
    }

上图：判断是因数 请求后台的banks方法是异常的，在created()函数中，默认会请求后台查询数据，这时bankId 是‘’，会导致后面的bankIds赋值异常

 

后台：在pojo中增加 private List<Short> bankIds; 用于接收前端的传值，在xml中

        <if test="bankIds !=null and bankIds.size > 0 ">
            and d.bankid in
            <foreach collection="bankIds" item="bankid" open="(" close=")" separator=",">
              #{bankid,jdbcType=NUMERIC}
            </foreach>
      </if>