vue axios 批量删除 数组参数
方法一:前端循环请求服务器端delete(id)方法
请问如何获得element-ui表格中的勾选项index,以实现批量删除功能
https://segmentfault.com/q/1010000012759131
方法二:传递 string类型字符串。例如: '1,2,3,4'
ids =[1,2,3,4]
服务器端接收到: string类型字符串 '1,2,3,4' ,然后string转int。
转换方法:
- var tstr = msgsnew.join(','); //数组转字符串
- console.log("tstr", tstr);
- var tstrtwo = msgsnew.toString(); //数组转字符串
- var tarra = tstr.split(','); //字符串转数组
方法三:直接传递数组类型(网上案例均尝试失败)
https://www.jianshu.com/p/68d81da4e1ad
参数:ids=1&ids=2&ids=3
(博客主的这个案例成功了,但不知为何,我没有尝试成功!)
2 axios向后台传递数组作为参数
https://blog.csdn.net/u012317188/article/details/79752096
JSON.stringify(ids)
服务器端收到的是string类型的 ‘[1,2,3,4]’
综上我采用了 方法二。
(如果有人尝试直接传递数组成功了,请一定留言!)
实现 : elementUI table 的 多选 :
http://element-cn.eleme.io/#/zh-CN/component/table
代码摘要:
- <el-button style="margin:0 0 0 20px;" type="primary" @click="toggleSelection(list)">反选</el-button>
- <el-button style="margin:0 0 0 20px;" type="primary" @click="submitAllSelection()">批量提交</el-button>
- <el-table
- ref="multipleTable"
- @selection-change="handleSelectionChange">
- <el-table-column
- type="selection"
- width="55"/>
- data() {
- return {
- multipleSelection: []
- }
- }
- methods: {
- toggleSelection(rows) {
- // console.log('rows', rows)
- // console.log('multipleTable-start', this.$refs.multipleTable) //table对象
- // this.$refs.multipleTable.toggleAllSelection(rows) //全选或全不选
- if (rows) {
- rows.forEach(row => {
- this.$refs.multipleTable.toggleRowSelection(row)// 反选
- })
- } else {
- // this.$refs.multipleTable.clearSelection() //清除选中
- }
- },
- handleSelectionChange(val) {
- this.multipleSelection = val //当前选中行的数据
- },
- submitAllSelection() {
- if (this.multipleSelection.length > 0) {
- this.$confirm('此操作将提交选中项, 是否继续?', '提示', {
- confirmButtonText: '确定',
- cancelButtonText: '取消',
- type: 'warning'
- }).then(() => {
- const idList = []
- for (const v of this.multipleSelection) {
- idList.push(v.DataSourceID)
- }
- this.submitAll(idList)
- }).catch(() => {
- this.$notify({
- title: '提示',
- message: '已取消批量提交',
- type: 'info',
- duration: 2000
- })
- })
- } else {
- this.$notify({
- title: '提示',
- message: '请勾选要提交的项!',
- type: 'warning',
- duration: 2000
- })
- }
- },
- submitAll(idList) {
- // const idList = JSON.stringify(ids)
- // console.log('idList', idList)
- submitAll(idList).then((response) => {
- if (response.success) {
- console.log('response', response.data)
- for (const v of this.multipleSelection) {
- const index = this.list.indexOf(v)
- this.list[index].HasSubmitted = true
- }
- this.$notify({
- title: '成功',
- message: '批量提交成功',
- type: 'success',
- duration: 2000
- })
- } else {
- this.$notify({
- title: '失败',
- message: '批量提交失败',
- type: 'danger',
- duration: 3000
- })
- }
- })
- }
- }
- export function submitAll(idList) {
- return request({
- url: '/investigator/submitAll/' + idList,
- method: 'post'
- })
- }
- 根据axios 封装出request 以简化请求。
C# webapi控制器
- /// <summary>
- /// 批量提交
- /// </summary>
- /// <param name="ids"></param>
- /// <returns></returns>
- [HttpPost]
- [Route("SubmitAll/{idList}")]
- public ApiResult SubmitAll(string idList)
- {
- var result = new ApiResult();
- result.success = false;
- if (!String.IsNullOrEmpty(idList) && !String.IsNullOrEmpty(idList.Trim()))
- {
- string[] strArray = idList.Split(',');
- if (strArray.Length > 0)
- {
- int[] ids = new int[] { };
- ids = Array.ConvertAll<string, int>(strArray, s => int.Parse(s));
- var num = manage.SubmitAll(ids, User.Identity.GetUserId<int>());
- result.success = true;
- result.data = num;
- }
- }
- return result;
- }
// 数据库访问层
- public int SubmitAll(int[] idList, int userId)
- {
- int num = 0;
- using (var pmdb = new ProjectEntities())
- {
- using (var tran = pmdb.Database.BeginTransaction())
- {
- try
- {
- var list = pmdb.T_Investigator.Where(d => idList.Contains(d.InvestigatorID) && d.CreateUserID == userId && d.HasSubmitted == false).ToList();
- if (list.Count > 0)
- {
- foreach (var item in list)
- {
- item.HasSubmitted = true;
- }
- num = pmdb.SaveChanges();
- tran.Commit();
- }
- }
- catch (Exception ex)
- {
- tran.Rollback();//回滚
- throw ex;
- }
- }
- }
- return num;
- }
vue axios 批量删除 数组参数的更多相关文章
- vue+axios通过formdata提交参数和上传文件
demo.vue 文件 <template> <div class="demo"> <input v-model="importForm.m ...
- vue.js 批量删除跟全选,反选效果
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...
- ajax 传递数组参数
一.ajax 传递数组参数 需要添加: traditional: true, let typeIDArr = [,,,,,]; var that = this; var url = '@Url.Act ...
- springMVC 接收数组参数,mybatis 接收数组参数,mybatis批量插入/批量删除案例
案例是给一个用户赋予多个权限,多个权限用其对应的主键 id 为参数,组成了 一个id数组,传给springMVC,然后springMVC传给mybatis,然后mybatis批量插入.其实类似的场景还 ...
- springmvc使用数组接收页面商品列表批量删除传过来的参数,并完成批量删除的操作。
1.1 需求 在商品列表页面选中多个商品,然后删除. 1.2 需求分析 此功能要求商品列表页面中的每个商品前有一个checkbox,选中多个商品后点击删除按钮把商品id传给controller,根据商 ...
- Mybatis 插入与批量插入以及多参数批量删除
实体类: import java.io.Serializable; public class AttachmentTable implements Serializable { private sta ...
- Vue小案例 之 商品管理------批量删除与商品数量的调整
通过索引进行删除,进行测试,是否获取其索引: 测试效果: 测试代码,在vue中定义一个空的数组,以便后面进行数据的绑定: data:{ imgUrl:'../res/images/', imgName ...
- Mybatis 针对ORACLE和MYSQL的批量插入与多参数批量删除
今天利用Mybatis的<for each>标签做oracle的批量插入数据时,发现和MySQL数据库有区别.在此记录下,以防之后再踩坑. 一.批量插入: 1.controller: /* ...
- Servlet 获取 数组id进行批量删除
把获取的复选框选中的 id(一般来说都是根据id 进行批量删除的) 从jsp页面 传值到Servlet中 jsp点击事件中: var array=[]; //先声明一个数组变量 var ids=$( ...
随机推荐
- Linux系统下如何运行.sh文件
在Linux系统下运行.sh文件有两种方法,比如我在root目录下有个datelog.sh文件 第一种(这种办法需要用chmod使得文件具备执行条件(x): chmod u+x datelog.sh) ...
- react基础篇 整理(一)
备注不知道为啥不能到出图片,详细知识自己百度一下就可以了,很简单的.画这个是为了更好的梳理知识,公司有个App项目,项目可控,所以尝试一下用React-native去做一下试试.
- 我的IT学习资源宝典
1.关于idea的详细学习博客知识网站:https://blog.csdn.net/column/details/15222.html?&page=1 2.关于Web的详细学习博客知识网站:h ...
- 回顾4180天在腾讯使用C#的历程,开启新的征途
今天是2018年8月8日,已经和腾讯解除劳动关系,我的公司正式开始运营,虽然还有很多事情需要理清,公司官网也没有做,接下来什么事情都需要自己去完成了,需要一步一个脚印去完善,开启一个新的征途,我将在博 ...
- Java面试大纲-java面试该做哪些准备,java开发达到这样的水平可以涨工资
Java培训结束,面临的就是毕业找工作.在找工作时,就要针对性地做充分的面试准备.准备不充分的面试,完全是浪费时间,更是对自己的不负责. 上海尚学堂Java培训整理出Java面试大纲,其中大部分都是面 ...
- [Swift]LeetCode810. 黑板异或游戏 | Chalkboard XOR Game
We are given non-negative integers nums[i] which are written on a chalkboard. Alice and Bob take tu ...
- [Swift]LeetCode854. 相似度为 K 的字符串 | K-Similar Strings
Strings A and B are K-similar (for some non-negative integer K) if we can swap the positions of two ...
- [Swift]LeetCode984. 不含 AAA 或 BBB 的字符串 | String Without AAA or BBB
Given two integers A and B, return any string S such that: S has length A + B and contains exactly A ...
- Java部署项目命令学习小结
前言: 暂无 零:java -h 和很多linux命令一样,我们第一步先通过“java -h”命令查看java命令的使用语法,其输出如下 [root@wxapp203 basesoft]# java ...
- Docker基础命令和时区问题
Docker 命令 1. 安装Docker # ubuntu系统安装 $ sudo apt install docker-ce # 启动docker $ sudo systemctl start do ...