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

前情提要

在做公司的一个基于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, 我说心里话,问题确实不大,但是我花了一个小时才搞明白,要是再能有一个清晰的例子说明这个问题就好了

相关推荐
itslife6 分钟前
vite 源码 - 创建 ws 服务
前端·javascript
懒人Ethan28 分钟前
解决一个C# 在Framework 4.5反序列化的问题
java·前端·c#
用户14567756103729 分钟前
Excel合并数据太麻烦?这个神器3秒搞定,打工人必备!
前端
西洼工作室1 小时前
前端混入与组合实战指南
前端
YQ_ZJH1 小时前
Spring Boot 如何校验前端传递的参数
前端·spring boot·后端
报错小能手1 小时前
linux学习笔记(18)进程间通讯——共享内存
linux·服务器·前端
魔云连洲1 小时前
深入解析:Object.prototype.toString.call() 的工作原理与实战应用
前端·javascript·原型模式
JinSo1 小时前
alien-signals 系列 —— 认识下一代响应式框架
前端·javascript·github
开心不就得了1 小时前
Glup 和 Vite
前端·javascript
szial1 小时前
React 快速入门:菜谱应用实战教程
前端·react.js·前端框架