Vue+iView向后台传递json数据（实现多选删除功能）

浅浅的花香味﹌ 2024-04-18 16:42 60阅读 0赞

## **需求分析：** ##

*  多选框实现批量删除

## **实现：** ##

*  首先获取勾选的行的数据

<i-table stripe border 
            :columns="columns" 
            :data="data" 
            @on-select-all="chooseAll"
            @on-selection-change="choose">
        </i-table>

*  两个方法

//全选
    	chooseAll: function (rows) {
        
    	  var data = [];
    	  for(var i = 0; i < rows.length; i++){
        
    	    data.push(rows[i].id)
    	  }
    	  this.chooseRows = data;
    	},
    	//单选
    	choose: function(rows){
        
    	  var data = [];
    	  for(var i = 0; i < rows.length; i++){
        
    	    data.push(rows[i].id)
    	  }
    	  this.chooseRows = data;
    	  console.log(this.chooseRows)
    	},

*  调用API
 *  使用JSON.stringify()将数组转化为json串
 *  请求头必须是 application/json

// 删除学生
    	export const delStudent = (delList) => {
        
    	  var del = JSON.stringify(delList)
    	  return axios.request({
        
    	    headers: {
        
    	      'Content-Type': 'application/json'
    	    },
    	    url: '/api/student/delete',
    	    method: 'post',
    	    data: del
    	  })
    	}

*  Java后端接收（ResponseBody必须加）

@PostMapping("/delete")
    	public ResponseResult delStudent(@RequestBody String[] ids) {
        
    	    return studentService.delStudent(ids);
    	}

*  这样就实现了批量删除的功能

## **总结：** ##

*  这个搞了我俩小时，有点难受。。。不过有了这次前端向后端发送JSON字符串的经历以后再碰到就会顺畅很多了，加油。