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;
        }