<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" /> function getList(val) { if (val.limit) { queryParams.value.pageSize = val.limit queryParams.value.pageNum = val.page } loading.value = true; listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(res => { loading.value = false; userList.value = res.rows; total.value = res.total; }); };
时间: 2024-04-08 14:32:45 浏览: 14
这段代码是一个Vue.js的模板代码示例,其中包含了一个名为`pagination`的组件和一个名为`getList`的函数。
`pagination`组件用于展示分页功能,根据条件判断`total`是否大于0,如果大于0则显示该组件。通过`:total="total"`将父组件中的`total`属性传递给分页组件,用于显示总数。通过`v-model:page="queryParams.pageNum"`和`v-model:limit="queryParams.pageSize"`实现双向绑定,将父组件中的`queryParams.pageNum`和`queryParams.pageSize`与分页组件的当前页码和每页显示数量进行关联。通过`@pagination="getList"`监听分页组件的pagination事件,当事件触发时调用父组件中的getList方法。
getList函数是一个用于获取数据列表的函数。接受一个参数val,判断val中是否存在limit属性,如果存在,则将其值赋给queryParams.value.pageSize,将val中的page属性赋值给queryParams.value.pageNum。接着将loading.value设置为true,表示正在加载数据。然后调用listUser方法,传递经过日期范围处理的queryParams.value和dateRange.value作为参数,并通过.then()方法处理返回的结果。在结果处理函数中,将loading.value设置为false,表示加载完成。然后将返回的用户列表数据赋值给userList.value,将返回的总数赋值给total.value。
这段代码的作用是展示分页组件,并根据用户选择的页码和每页显示数量获取相应的数据列表,并更新相关的状态。在获取数据前后,通过控制loading.value来显示加载状态。