vue axios 批量删除数组参数

方法一：前端循环请求服务器端delete（id）方法

请问如何获得element-ui表格中的勾选项index，以实现批量删除功能

转载来源：https://segmentfault.com/q/1010000012759131

方法二：传递 string类型字符串。例如: '1,2,3,4'

ids =[1,2,3,4]

url: '/investigator/submitAll/' + ids,

method: 'post'

服务器端接收到： string类型字符串 '1,2,3,4' ，然后string转int。

转换方法：

 var tstr = msgsnew.join(',');    //数组转字符串
 console.log("tstr", tstr);
 var tstrtwo = msgsnew.toString();       //数组转字符串

var tarra = tstr.split(',');    //字符串转数组

方法三：直接传递数组类型（网上案例均尝试失败）

1 axios传递数组参数爬坑总结

转载来源：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;
}