mui-datatables如何从onRowsDelete事件中获取选中行的完整数据

解决方法 #

MUIDataTable 的 onRowsDelete 回调返回的data数组中，每个元素的dataIndex属性就是你传入组件的源数据users数组对应的下标，你可以直接通过这个下标从users里拿到完整的行对象。

修改后代码示例 #

const options: MUIDataTableOptions = {
    onRowsDelete: (e) => deleteSelectedUser(e),
    // 可选配置：阻止组件默认删除行的行为，等接口调用成功后手动更新表格
    // onRowsDelete: () => false
}


async function deleteSelectedUser(e: any) {
    // 批量取出所有要删除的行对应的完整用户对象
    const deletedUsers = e.data.map(item => users[item.dataIndex])
    // 遍历调用删除接口，也可以调整为批量接口一次性提交所有待删除用户
    for (const user of deletedUsers) {
        // 把用户ID或者完整对象传给删除接口
        await deleteUser(user.id).then((result) => {
            console.log(result)
        })
    }
    // 接口调用成功后手动更新users状态，刷新表格
    // setUsers(prev => prev.filter(item => !deletedUsers.some(delUser => delUser.id === item.id)))
}

return (
    <div>
        {
            users.length > 0 &&
                <MUIDataTable
                title={"Employee List"}
                data={users}
                columns={columns}
                options={options}
                />
        }
    </div>
)

注意事项 #

• 即使你开启了表格的分页、排序、筛选功能，dataIndex仍然对应原始users数组的下标，不会受前端展示逻辑的影响，可以放心使用。
• 不要依赖回调返回的index属性，这个是当前分页展示的行下标，分页/排序后会和源数组下标不一致，只有dataIndex是和源数据绑定的。
• 如果需要保证接口删除成功后再更新表格视图，就开启上面注释的onRowsDelete: () => false配置，避免接口调用失败时前端展示和后端数据不一致。

内容的提问来源于stack exchange，提问作者lrefopam