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>