JS：向对象如{aa:123}动态添加成员(Vue Element 表格批量删除功能)

JS对象可以按如下方式添加

let params={};

params["bb"]=2;

params["cc"]=3;

 

应用

前端和后台都使用{aa=1,bb=2}接受参数的情况下，批量删除可以应用到此方法。

Element 表格批量删除功能中，需要动态获取勾选行的主键ID值，前端表格定义html代码如下：

      <el-table
        :data="users"
        border
        class="table"
        ref="multipleTable"
        @selection-change="handleSelectionChange"//选择事件
        v-loading="isShowloading"
      >

其中“handleSelectionChange”选择事件中用数组接收选中行数据，定义方法如下：

    delData: [],

    handleSelectionChange(delData) {
      this.delData = delData;//用数组接受选中行数据
    },

“批量删除”按钮事件内容如下：

    // ------批量删除-------//
    delAll() {
      this.$confirm("确认删除勾选的记录吗?", "提示", {
        type: "warning"
      }).then(() => {
        this.isShowloading = true;
        console.log(this.delData);
        let params = {};
        this.delData.forEach(row=>{
          console.log(row.fid);
          params[row.fid]=row.fid;
        })        
        console.log(params);
        });
      });
    },

定义接受参数params，遍历选中行数组，用键值对方式赋值给params。

控制台打印的params格式为：{8=8,9=9}

键是8，值也是8，传到mvc后台，可以用@RequestParam HashMap<String, String> map取出来。java代码如下：

	//批量删除记录
	@RequestMapping(value = "/deleteList", method = RequestMethod.POST)
	@ResponseBody
	public ResultMsg deleteList(HttpServletResponse response, @RequestParam HashMap<String, String> map) {
		String estr = "删除账号队列(deleteList)===：";
		try {		
		response.setHeader("Access-Control-Allow-Origin", "*");
		logger.debug(estr+"map:" + map.toString());
		ResultMsg rMsg = new ResultMsg();
		Integer rc = 0;
        //此处用遍历方式调用单条删除功能
		for (Iterator<Entry<String, String>> items = map.entrySet().iterator(); items.hasNext();) {
			Entry<String, String> item = items.next();
			Integer n = userDao.deleteById(item.getValue());//数据库删除
			if (n > 0)
				rc++;
		}
		if (rc > 0) {
			rMsg.setSuccess();
		}
		logger.debug(rMsg.toString());
		return rMsg;
		} catch (Exception e) {
			logger.error(estr + e.toString());
			return null;
		}		
	}