iView+Vue+SpringBoot多选

通过给 columns 数据设置一项，指定 type: 'selection'，即可自动开启多选功能。

给 data 项设置特殊 key _checked: true 可以默认选中当前项。

给 data 项设置特殊 key _disabled: true 可以禁止选择当前项。

正确使用好以下事件，可以达到需要的效果：

• @on-select，选中某一项触发，返回值为 selection 和 row，分别为已选项和刚选择的项。
• @on-select-all，点击全选时触发，返回值为 selection，已选项。
• @on-selection-change，只要选中项发生变化时就会触发，返回值为 selection，已选项。

前端： 

<template>
    <div class="base-wrap" style="overflow:auto;margin-bottom: 80px;"> 
 <Table ref="selection" :columns="columnsList" :data="dataList" :loading="isLoading"
                   @on-selection-change="tableSelectChange"
            >
            </Table>
    </div>
</template>


<script>


    export default {
        data() {
            return {
                columnsList: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '序号',
                        type: "index",
                    },
              ]
           }
     },
  
  methods: {
     tableSelectChange(selection,row){
                this.tableSelectIds = [];
                for(let i=0;i<selection.length;i++){
                    this.tableSelectIds.push(selection[i].orderId);
                }
                console.log("选中项："+this.tableSelectIds);
            },
     batchAddAffiliation(){
                let self = this;
                if(this.tableSelectIds.length<=0){
                    self.$Message.error("请先选择！");
                }else{
                    let params = {
                  
                        'ids': JSON.stringify(this.tableSelectIds)
                    };
                    this.$http.put("/order/pay", params).then(res => {
                        if (res.code === 200) {
                            self.$Message.success("添加成功！");
                            this.getData();
                        } else {
                            self.$Message.error("添加失败！" + res.code+res.data);
                        }
                    });
                }
            }
}

后端：

  接收参数：

 

 @PutMapping("/pay")
    @Transactional
    public Result batchAddAffiliation(@RequestBody Map<String, Object> paramsMap) {
 JSONArray json = JSONObject.parseArray((String) paramsMap.get("ids"));
        String[] ids = new String[json.size()];
        ids = json.toArray(ids);
   ...


}

 mapper:

battachPay(@Param("ids")String[] ids);

 <if test="ids!=null and ids.length>0">
            AND order_id IN
            <foreach collection="ids" item="id" index="index" open="(" close=")" separator=",">
                #{id}
            </foreach>
</if>