记录Vue3-Naive-ui 的 dataTable组件的 pagination 使用踩坑记录

Mintopia2025-04-08 10:35

前情提要

在做公司的一个基于naiveUi的前端项目，过程中感觉很丝滑，没有任何问题，直到今天和后端对接口，做到了表格这里，浪费了我一个半小时，可恶，我一定要写出来出出气，当然这个问题也许是我理解能力不够（本人也接触过n个Ui库了，没想到还是会磕绊）, 也许你们也一定会遇到, 文章中naiveUi的版本是2.40.3

不废话，先贴解决方案

js 复制代码

<!-- 表格区域 -->
  <n-data-table
    size="small"
    :columns="columns"
    :data="tableData"
    ----这个属性要设置为true
    :remote="true"
    :loading="loading"
    :pagination="pagination"
    @update:page="onUpdatePage"
  />
  
  // 好了关键的来了, 一般人按照官网示例会发现配置半天配不出来，但是你按我下面这样就行
  
  // 页码数据
    const pagination = computed(() => {
        return {
            /** 双向绑定页码 **/
            page: page,
            /** 计算当前页码数 */
            pageCount: Math.ceil(dataTotal / pageSize),
        }
    })
    
  // 按照上面的配置你就可以显示并使用页码了，具体的接口请求，和页面变化函数我就不贴了，一般也没问题

问题解决的过程

凭借经验我认为，页码显示异常多数是配置的不对，naiveUi这个库我这几天使用下来，还是很赞的，功能很强大，封装的很简洁，但是页码这块儿的示例却让人迷路，我几乎了dataTable的示例和pagination的示例，但就是没能解决，我带着一点点恼火，在百度之前尝试了一种情况如下：

js 复制代码

 const pagination = computed(() => {
    return {
        /** 双向绑定页码 **/
        page: page,
        /** 计算当前页码数 */
        // pageCount: Math.ceil(dataTotal / pageSize),
        pageCount: 49,
    }
})

然后界面就变这样了

这样就很高兴了，至少页码变过来可以切换了，那问题也很显然，如果是拉取远端数据，你要开启:remote=true 的同时去计算pageCount, 我说心里话，问题确实不大，但是我花了一个小时才搞明白，要是再能有一个清晰的例子说明这个问题就好了