elementUI 中的表格插入行或新增行

昨天做了这么一个需求  就是在table里有两个地方,是需要通过弹窗选中的数据来回显的,

如图中  假设第一个弹窗选中5条数据  就在表格新增五条   

但是在第二个框上第三条数据再次新增

就是从3,,4,5行修改  6,7行新增 

下面是我的代码  大家可以参考一下  

/* 
当前逻辑为  表格有两个弹框 可以多选向表格添加数据
判断表格行数据是否为空，为空则直接添加，不为空则判断是否为修改，修改则修改对应行数据，新增则添加一行数据
this.selectionValue 是多行选中的数据
this.rowIndex 为当前点击索引
this.form.tableData 为表格数据集合
*/
//将多行选择的数据中的class_name循环修改为cid
this.selectionValue.forEach((item) => {
  item.cid = item.class_name;
});
//判断新增 or 修改  遍历多选选中的数据
// this.rowIndex 为点击的行索引  也就是当前点击的第几行弹出的弹框
this.selectionValue.forEach((item, index) => {
    // 获取当前行数据
  let indexData = this.form.tableData[this.rowIndex + index];
  // 判断当前行是否有内容
  if (indexData == undefined) {
    //如果为空行 则直接添加
    this.form.tableData.push(item);
  } else {
    //不为空行 判断另一个弹窗是否有数据
    if (indexData.spec_no == undefined) {
      // 插入到当前行
      this.form.tableData.splice(this.rowIndex + index, 0, item);
    } else {
      //修改
      this.$set(
        this.form.tableData[this.rowIndex + index],
        "goods_no",
        item.goods_no
      );
      this.$set(
        this.form.tableData[this.rowIndex + index],
        "goods_name",
        item.goods_name
      );
      this.$set(this.form.tableData[this.rowIndex + index], "cid", item.cid);
    }
  }
});
//过滤掉空行
this.form.tableData = this.form.tableData.filter(function (item) {
  return item.goods_no !== "";
});