vue+element-UI实现复制表格当前行的内容

目录

这是在实习中遇到的一个小问题，第一次分享文章，功能不难，但是我觉得挺有意思的，记录一下，各位小伙伴如果有更好的方法，欢迎大家留言哟~

功能实现场景

1、只改变表格里面的一个参数
我们在做项目时，可能需要我们改变表格某一列的内容，并复制多个，例如进货日期，如下图

我想要添加水果在不同进货日期，希望在点击复制时，有一个弹出框，我们在弹出框输入开始时间和结束日期，点击确认我们就可以进行复制

基本思路

1、我们需要获取到从开始时间到结束时间里面所有的日期，并放在一个数组里；
2、遍历日期进行添加。

代码

1、不请求接口

copyDialog(data) {
      this.dialog.show = true;
      this.$set(this.dialog, "data", data);
    },

add(data = {}) {
    this.isDialogSubmiting = true;
    const dateArr = this.getDayAll(
      this.dialog.data.begin_time,
      this.dialog.data.end_time
    );
    for (let i = 0; i < dateArr.length; i++) {
      const obj = JSON.parse(JSON.stringify(data));
      obj.date = dateArr[i];
      this.tableData.push(obj);
    }
    this.isDialogSubmiting = false;
    this.dialog.show = false;
    }

//dateArr为复制时间的数组
//data是此行的数据加上开始和结束的时间

2、请求接口
假如我们通过Add添加数据

async add(data = {}) {
      this.isDialogSubmiting = true;
      const dateArr = this.getDayAll(
        this.dialog.data.begin_time,
        this.dialog.data.end_time
      );
      const res = [];
      for (let i = 0; i < dateArr.length; i++) {
        const obj = JSON.parse(JSON.stringify(data));
        obj.date = dateArr[i];
        const rst =Add(obj);
        res.push(rst);
      }
     if (await Promise.all(res)) {
        this.isDialogSubmiting = false;
        this.dialog.show = false;
        this.getList();
      }
      }

补充+进一步

1、因为使用了eslint ，在请求后端接口的时候，不让在循环里面使用await，使用了Promise.all()
2、使用Promise.all()，虽然也可以实现复制，但是返回的数据并不是按顺序返回的，因此我使用 reduce 函数来遍历数组并按顺序解决 Promise。

for (let i = 0; i < dateArr.length; i++) {
        const obj = JSON.parse(JSON.stringify(data));
        obj.award_date = dateArr[i];
        res.push(obj);
      }
      //这里真的绝了，reduce真厉害
      const result = res.reduce((accumulatorPromise, next) => accumulatorPromise.then(() => awardAdd(next)), Promise.resolve());
      result.then(() => {
        this.isDialogSubmiting = false;
        this.dialog.show = false;
        this.getList();
      });

参考
在js循环里面正确使用async/await
解决循坏里async/await.