安康市建设局网站,网站开发实战项目,网站优化及推广公司,比较商务网站的营销策略需求描述
最后提交时删除表格中的空行
实现方法
单行删除 - 并不是一次性删除
表格每行的最后设置删除按钮#xff0c;点击时将当前行的索引传递给方法#xff0c;splice 删除当前行。
el-table :datatableData classmyTable border..…需求描述
最后提交时删除表格中的空行
实现方法
单行删除 - 并不是一次性删除
表格每行的最后设置删除按钮点击时将当前行的索引传递给方法splice 删除当前行。
el-table :datatableData classmyTable border... el-table-column propoperate width100 label操作template slot-scopescopediv classdelItem clickdelItem(scope.row, scope.$index)删除/div/template/el-table-column
/el-tabledelItem(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);}
}完整示例代码
templatediv classmainBoxel-table :datatableData classmyTable borderel-table-column propid width80 labelIDtemplate slot-scopescopeel-input v-modelscope.row.id/el-input/template/el-table-columnel-table-column propvalue label内容template slot-scopescopeel-input v-modelscope.row.value/el-input/template/el-table-columnel-table-column propoperate width100 label操作template slot-scopescopediv classdelItem clickdelItem(scope.row, scope.$index)删除/div/template/el-table-column/el-tablediv classaddLine clickaddItem新增/divdiv classsubmitBtn clicksubmit提交/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 langless 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
