需求描述

• 最后提交時(shí)刪除表格中的空行
  

實(shí)現(xiàn)方法

單行刪除 - 并不是一次性刪除

• 表格每行的最后設(shè)置刪除按鈕，點(diǎn)擊時(shí)將當(dāng)前行的索引傳遞給方法，splice 刪除當(dāng)前行。

<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) {// 刪除選中行-僅刪除一項(xiàng)this.tableData.splice(index, 1);}});
}

1.filter 過濾

• 利用 es6 屬性，過濾出想要的內(nèi)容，對數(shù)組重新賦值

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

2,正向遍歷

• 設(shè)置 5 條數(shù)據(jù)，ID 都為空，說明這 5 條都需要被刪除
  
• 錯(cuò)誤示例

for (var i = 0; i < this.tableData.length; i++) {console.log("當(dāng)前索引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 被刪除了，因?yàn)閯h除掉 0 后，遍歷 for 的索引發(fā)生了動(dòng)態(tài)的變化，但是原始數(shù)組的索引未改變，因此需要在刪除后，修復(fù)一下 i 的值
• 正確示例

for (var i = 0; i < this.tableData.length; i++) {console.log("當(dāng)前索引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(""); // 分隔行
}

• 修復(fù) i 的取值后，每次刪除掉當(dāng)前項(xiàng)之后，都從當(dāng)前索引重新開始遍歷

3.反向遍歷

• 反向遍歷不會(huì)受索引空缺的影響

for (var i = this.tableData.length - 1; i >= 0; i--) {console.log("當(dāng)前索引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="內(nèi)容"><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("得到最終結(jié)果", this.tableData);},filterFunc() {this.tableData = this.tableData.filter((item) => item.id);},forFunc1() {for (var i = 0; i < this.tableData.length; i++) {console.log("當(dāng)前索引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("當(dāng)前索引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>