Vue中向js中传递参数并在js中定义对象并转换参数

Myth丶恋晨 2023-10-06 13:53 114阅读 0赞

## 场景 ##

有下面这种主从表结构

![20200730162755243.jpg][]

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

在Vue中将页面的信息传递到js的方法中，在js方法中将参数进行转换使其与后台接收的参数相匹配。

注：

博客：  
[https://blog.csdn.net/badao\_liumang\_qizhi][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
      })
    }

[20200730162755243.jpg]: https://img-blog.csdnimg.cn/20200730162755243.jpg
[https_blog.csdn.net_badao_liumang_qizhi]: https://blog.csdn.net/badao_liumang_qizhi