ant-design vue 表格多选删除功能
1、多选删除过第一次后,下次多选选中的数据累加之前删除的数据第一次删除第二次删除细心的你会发现,第二次只选中了两条数据,但是得到确是跟之前删除的累加总和了,如果第三次选中2条,则就是5条了2、代码:// 复选框选中onSelectChange(electedRowKeys, selectedRows) {this.selectedRowKeys = electedRowKeysthis.ids =
·
1、多选删除过第一次后,下次多选选中的数据累加之前删除的数据
第一次删除
第二次删除
细心的你会发现,第二次只选中了两条数据,但是得到确是跟之前删除的累加总和了,如果第三次选中2条,则就是5条了
2、代码:
// 复选框选中
onSelectChange(electedRowKeys, selectedRows) {
this.selectedRowKeys = electedRowKeys
this.ids = this.selectedRowKeys;
},
如果你打印选中的方法中的electedRowKeys参数。你就会发现问题所在了,根本不是删除一次更新一次,所以自己就需要在删除成功后调用选中的方法onSelectChange,即:
(主要代码:that.onSelectChange([], []))
// 删除表格某个数据
del(id) {
// 解决报未定义的错
let that = this;
// 判断是多选还是单选
let delType = id instanceof Array;
let length = 0;
let changeId = "";
if (delType) {
// 多条
length = id.length;
// 数组转字符串
changeId = id.join(",");
} else {
changeId = id;
}
that.$confirm({
title: delType
? `您确定要删除这${length}个站点吗?`
: "您确定要删除该站点吗?",
content: "删除后不可恢复哦",
okText: "确定",
okType: "danger",
cancelText: "取消",
onOk() {
// 调用删除接口
delData(changeId).then((res) => {
if (res.data.code === 0) {
// 调用多选方法,清空调之前选中的数据,不然会累加
that.onSelectChange([], [])
// 删除成功更新数据
if (delType) {
// 如果是多选,遍历id数组
id.forEach((item) => {
// 通过选中的id与原对象数组的id判断,不相同则留着
that.tableData = that.tableData.filter((it) => it.id != item);
});
} else {
// 单选则直接把选中的id和原对象数组的id比较
that.tableData = that.tableData.filter(
(it) => it.id != changeId
);
}
// 判断是否删除完当前页数据并且总页码数大于1,则加载上一页或下一页数据
if (that.tableData.length == 0 && (that.pagination.total/that.pageSize) > 1 && that.pageNum == parseInt(that.pagination.total/that.pageSize)) {
// 当前页码等于总页码数,加载上一页(最后一页)
that.pageNum--
that.getData(that.pageNum, 10)
} else if (that.tableData.length == 0 && (that.pagination.total/that.pageSize) > 1 && that.pageNum < parseInt(that.pagination.total/that.pageSize)) {
// 当前页码数小于总页码数,加载下一页(第一页或者中间页)
that.pageNum++
that.getData(that.pageNum, 10)
}
}
});
},
onCancel() {
// 关闭提示
},
});
},
每次删除成功后调用选中的方法,给参数初始化,这样就可以每次删除后拿到的选中的值都是最新的了
最后点击删除:(调用删除方法)
// 点击表格上的删除按钮
delMore() {
// 判断是否选中
if (this.ids && this.ids.length) {
// 调用删除方法
this.del(this.ids);
}
},
有山就有路,有河就能渡!
更多推荐
已为社区贡献35条内容
所有评论(0)