方法一：前端循环请求服务器端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‘ 。
方法三：直接传递数组类型（网上案例均尝试失败）
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;
}