vue3 使用antd Table组件中 rowSelection 时发现选中项 selectedRowKeys 清空没有效果,叠加了上次的选中数据
vue3 使用antd Table组件中 rowSelection 时发现选中项 selectedRowKeys 清空没有效果,叠加了上次的选中数据
·
1、bug重现,选中删除一条数据,删除成功,重新请求刷新表格,且清空选中项(表格已封装过,所以不是a-table)
<table-box
v-if="isShow"
:columns="state.columns"
:dataSource="state.tableData"
:pagination="pagination"
:rowSelection="rowSelection"
:routerName="routerName"
@change="handleTableChange"
:loading="loading"
>
</table-box>
const state = reactive({
selectedRowKeys: []
});
const getTableData = async (formData) => {
loading.value = true;
let res = await request(url.GET_DEVICE_FIRM_LIST, "get", formData)
.finally(() => {
loading.value = false;
})
loading.value = false;
state.selectedRowKeys = [];
pagination.current = res.pages;
pagination.total = res.total;
state.tableData = res.rows;
};
const rowSelection = {
onChange: (selectedRowKeys, selectedRows) => {
state.selectedRowKeys = selectedRowKeys;
console.log(
`selectedRowKeys: ${selectedRowKeys}`,
"selectedRows: ",
selectedRows
);
},
};
const handleDelMore = () => {
if (state.selectedRowKeys.length) {
handleDel(state.selectedRowKeys);
}
};
const handleDel = (id) => {
let type = id instanceof Array;
let length = 0;
let ids = "";
let delUrl = url.DELETE_DEVICE_FIRM + id;
if (type) {
length = id.length;
ids = id.join(",");
delUrl = url.DELETE_DEVICE_FIRM + ids;
}
Modal.confirm({
title: type
? `您确定要删除${length}个设备厂商吗?`
: "您确定要删除该设备厂商吗?",
content: "删除后不可恢复哦",
class: "del-modal",
icon: createVNode(ExclamationCircleOutlined),
okText: "确定",
okType: "primary",
cancelText: "取消",
onOk: () => {
request(delUrl, "delete")
.then(() => {
message.success("删除成功!");
getTableData(formData);
})
},
onCancel() {
},
});
};
2、删除成功且表格重新刷新成功,但是重新选中项的时候却含有上次删除的项在里边,以下图片时操作删除后然后刷新表格,再次选中打印出的数据,返回的数据id为10的数据都不存在,却还保留在了选中项中
3、修改另一种写法,随意在哪儿清空都行,删除成功或者刷新表格后,再次选中后,拿到的项都是正确的
<table-box
v-if="isShow"
:columns="state.columns"
:dataSource="state.tableData"
:pagination="pagination"
:rowSelection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"
:routerName="routerName"
@change="handleTableChange"
:loading="loading"
>
</table-box>
const onSelectChange = (sel) => {
state.selectedRowKeys = sel;
};
const getTableData = async (formData) => {
loading.value = true;
let res = await request(url.GET_DEVICE_FIRM_LIST, "get", formData)
.finally(() => {
loading.value = false;
})
loading.value = false;
state.selectedRowKeys = [];
pagination.current = res.pages;
pagination.total = res.total;
state.tableData = res.rows;
};
const handleDelMore = () => {
if (state.selectedRowKeys.length) {
handleDel(state.selectedRowKeys);
}
};
const handleDel = (id) => {
let type = id instanceof Array;
let length = 0;
let ids = "";
let delUrl = url.DELETE_DEVICE_FIRM + id;
if (type) {
length = id.length;
ids = id.join(",");
delUrl = url.DELETE_DEVICE_FIRM + ids;
}
Modal.confirm({
title: type
? `您确定要删除${length}个设备厂商吗?`
: "您确定要删除该设备厂商吗?",
content: "删除后不可恢复哦",
class: "del-modal",
icon: createVNode(ExclamationCircleOutlined),
okText: "确定",
okType: "primary",
cancelText: "取消",
onOk: () => {
request(delUrl, "delete")
.then(() => {
message.success("删除成功!");
getTableData(formData);
})
},
onCancel() {
},
});
};
你不肯清醒,看再多少文案都没用.
更多推荐
已为社区贡献13条内容
所有评论(0)