老师，我觉得你的分页查询有bug
来源：7-3 用户列表交互实现
筱筱的梦
2021-11-08
比如我在查询处输入内容，但我不点查询，我点击第二页，预期的结果应该是表格呈现全部数据的第二页。但如果分页接口和查询传参的form是同一个的话，那么就会出现我在输入框输入了内容，但我不点查询点击第二页，直接就把我输入的条件和第二页当参数去查询了。我的解决方案是定义两个form，一个给查询，一个给分页用，当点击完查询后再把查询的参数传给分页定义的form，这个是我的想法，不知道有没有更好的办法
写回答
3回答
-
河畔一角
2024-01-08
其实，可以不用useeffect来解决。点击的时候，调用接口。
10 -
桐子酱Virginia
2024-01-08
其实不用这么麻烦的，你可以定义一个变量queryClicked，用来表示查询按钮是否被点击，初始值为false。用户点击了查询按钮后，在handleQuery函数里对queryClicked取反。然后在getUserList函数里定义查询条件params之前，先去对queryClicked进行判断，如果为true，说明用户确实点击了按钮，那么此时params里就应该既包含查询表单里的参数，又包含分页的参数，否则params里就应该只包含分页参数。
// 表示查询按钮是否点击 let queryClicked = false // 获取用户列表数据 const getUserList = async () => { const { pageNum } = pager // 定义查询条件 let params = {} // 判断查询按钮是否被点击，若点击了再把queryForm传入查询条件中，否则就只传pageNum if (queryClicked) { params = { ...queryForm, pageNum } } else { params = { pageNum } } const { page = {}, list = [] } = await api.getUserList(params) pager.total = page.total userList.value = list } // 点击查询按钮，查询对应的用户列表数据 const handleQuery = () => { queryClicked = !queryClicked getUserList() }00 -
河畔一角
2021-11-08
你说的这个确实是一个问题，我明天查一下代码。这个是有方法的，如果确实是你说的这样，那确实不对。点击查询以后条件才能生效
01
相似问题