Vue中向js中傳遞引數並在js中定義物件並轉換引數
阿新 • • 發佈:2020-07-30
場景
有下面這種主從表結構
上面的資訊是主表的資訊,下面是從表的資訊。
在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 }) }