1. 程式人生 > 實用技巧 >Vue中向js中傳遞引數並在js中定義物件並轉換引數

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