需求描述

• 最后提交时删除表格中的空行
  

实现方法

单行删除 - 并不是一次性删除

• 表格每行的最后设置删除按钮，点击时将当前行的索引传递给方法，splice 删除当前行。

<el-table :data="tableData" class="myTable" border>
  ... 
  <el-table-column prop="operate" width="100" label="操作">
    <template slot-scope="scope">
      <div class="delItem" @click="delItem(scope.row, scope.$index)">
        删除
      </div>
    </template>
  </el-table-column>
</el-table>

delItem(row, index_) {
  this.tableData.map((item, index) => {
    if (index_ == index) {
      // 删除选中行-仅删除一项
      this.tableData.splice(index, 1);
    }
  });
}

1.filter 过滤

• 利用 es6 属性，过滤出想要的内容，对数组重新赋值

this.tableData = this.tableData.filter((item) => item.id);

2,正向遍历

• 设置 5 条数据，ID 都为空，说明这 5 条都需要被删除
  
• 错误示例

for (var i = 0; i < this.tableData.length; i++) {
  console.log("当前索引i=" + i + "，原始：" + this.tableData[i].value);
  if (!this.tableData[i].id) {
    console.log(
      "移除掉的索引i=" + i + "，原始：" + this.tableData[i].value
    );
    this.tableData.splice(i, 1);
    // i--;
  }
  console.log(""); // 分隔行
}

• 上图可以看出，只有 0、2、5 被删除了，因为删除掉 0 后，遍历 for 的索引发生了动态的变化，但是原始数组的索引未改变，因此需要在删除后，修复一下 i 的值
• 正确示例

for (var i = 0; i < this.tableData.length; i++) {
  console.log("当前索引i=" + i + "，原始：" + this.tableData[i].value);
  if (!this.tableData[i].id) {
    console.log(
      "移除掉的索引i=" + i + "，原始：" + this.tableData[i].value
    );
    this.tableData.splice(i, 1);
    i--;
  }
  console.log(""); // 分隔行
}

• 修复 i 的取值后，每次删除掉当前项之后，都从当前索引重新开始遍历

3.反向遍历

• 反向遍历不会受索引空缺的影响

for (var i = this.tableData.length - 1; i >= 0; i--) {
  console.log("当前索引i=" + i + "，原始：" + this.tableData[i].value);
  if (!this.tableData[i].id) {
    console.log(
      "移除掉的索引i=" + i + "，原始：" + this.tableData[i].value
    );
    this.tableData.splice(i, 1);
  }
}

完整示例代码

<template>
  <div class="mainBox">
    <el-table :data="tableData" class="myTable" border>
      <el-table-column prop="id" width="80" label="ID">
        <template slot-scope="scope">
          <el-input v-model="scope.row.id"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="value" label="内容">
        <template slot-scope="scope">
          <el-input v-model="scope.row.value"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="operate" width="100" label="操作">
        <template slot-scope="scope">
          <div class="delItem" @click="delItem(scope.row, scope.$index)">
            删除
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="addLine" @click="addItem">新增</div>
    <div class="submitBtn" @click="submit">提交</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
    };
  },
  mounted() {
    // 初始化
    this.tableData = [
      {
        id: "",
        value: "",
      },
    ];
  },
  methods: {
    delItem(row, index_) {
      this.tableData.map((item, index) => {
        if (index_ == index) {
          // 删除选中行
          this.tableData.splice(index, 1);
        }
      });
    },
    addItem() {
      this.tableData.push({
        id: "",
        value: "",
      });
    },
    submit() {
      // this.filterFunc();
      // this.forFunc1();
      this.forFunc2();
      console.log("得到最终结果", this.tableData);
    },
    filterFunc() {
      this.tableData = this.tableData.filter((item) => item.id);
    },
    forFunc1() {
      for (var i = 0; i < this.tableData.length; i++) {
        console.log("当前索引i=" + i + "，原始：" + this.tableData[i].value);
        if (!this.tableData[i].id) {
          console.log(
            "移除掉的索引i=" + i + "，原始：" + this.tableData[i].value
          );
          this.tableData.splice(i, 1);
          i--;
        }
        console.log(""); // 分隔用
      }
    },
    forFunc2() {
      for (var i = this.tableData.length - 1; i >= 0; i--) {
        console.log("当前索引i=" + i + "，原始：" + this.tableData[i].value);
        if (!this.tableData[i].id) {
          console.log(
            "移除掉的索引i=" + i + "，原始：" + this.tableData[i].value
          );
          this.tableData.splice(i, 1);
        }
      }
    },
  },
};
</script>
<style lang="less" scoped>
.mainBox {
  padding: 20px;
  .myTable {
    width: 500px;
  }
  .delItem {
    cursor: pointer;
  }
  .addLine {
    width: 498px;
    text-align: center;
    height: 40px;
    line-height: 40px;
    color: #909399;
    border: 1px solid #ebeef5;
    border-top: none;
    cursor: pointer;
  }
  .submitBtn {
    width: 100px;
    height: 40px;
    line-height: 40px;
    background: #409eff;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    margin-top: 10px;
    cursor: pointer;
  }
}
</style>