Vue中向js中傳遞參數並在js中定義對象並轉換參數

場景

有下面這種主從表結構

 

 

上面的信息是主表的信息，下面是從表的信息。

在Vue中將頁面的信息傳遞到js的方法中，在js方法中將參數進行轉換使其與后台接收的參數相匹配。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

在vue中調用新增按鈕並傳遞主從表的頁面數據

            addBcgl(this.form, this.bcglXiangXiList).then((response) => {
              if (response.code === 200) {
                this.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              }
            });

 

然后在引用的js的方法中

首先怎樣定義一個數組，用來存儲從表的對象。

var bcglxiangxiList = new Array();

然后怎樣定義對象來存儲從表的屬性，即下面的幾點到幾點的屬性

var bcxiangxi  = {};

然后就可以遍歷頁面傳遞的參數依次將參數屬性進行轉換並push進數組。

  //定義班次詳細數組
  var bcglxiangxiList = new Array();
  //定義班次詳細對象
  var bcxiangxi  = {};
  //循環傳遞的參數
  bcglXiangXiListParam.forEach(element => {
    bcxiangxi.xh = element.xh;
    bcxiangxi.bcbh = data.bcbh;
    bcxiangxi.dkkssj = element.sjfw[0];
    bcxiangxi.dkjssj = element.sjfw[1];
    bcxiangxi.ts = element.ts;
    bcxiangxi.dkdd = element.dkdd;
    bcxiangxi.zxjxljsj = element.jxsjfw[0];
    bcxiangxi.zdjxljsj = element.jxsjfw[1];
    //將班次詳細對象存進班次詳細數組
    bcglxiangxiList.push(bcxiangxi);
  });

 

完整示例代碼

export function addBcgl(data,bcglXiangXiListParam) {
  //定義班次詳細數組
  var bcglxiangxiList = new Array();
  //定義班次詳細對象
  var bcxiangxi  = {};
  //循環傳遞的參數
  bcglXiangXiListParam.forEach(element => {
    bcxiangxi.xh = element.xh;
    bcxiangxi.bcbh = data.bcbh;
    bcxiangxi.dkkssj = element.sjfw[0];
    bcxiangxi.dkjssj = element.sjfw[1];
    bcxiangxi.ts = element.ts;
    bcxiangxi.dkdd = element.dkdd;
    bcxiangxi.zxjxljsj = element.jxsjfw[0];
    bcxiangxi.zdjxljsj = element.jxsjfw[1];
    //將班次詳細對象存進班次詳細數組
    bcglxiangxiList.push(bcxiangxi);
  });
  debugger
  data.bcglXiangXiList=bcglxiangxiList;
  debugger
  return request({
    url: '/kqgl/bcgl/addBcgl',
    method: 'post',
    data: data
  })
}