网站建设目标及需求整站优化排名

需求描述

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

实现方法

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

• 表格每行的最后设置删除按钮，点击时将当前行的索引传递给方法，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>