Naive UI之数据表格 Data Table 分页

最新推荐文章于 2025-05-26 22:30:55 发布

aliceyang2012

最新推荐文章于 2025-05-26 22:30:55 发布

阅读量4.4k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue 文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/aliceyang2012/article/details/127805526

vue 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了如何使用Vue的n-data-table实现数据远程加载和动态分页功能，包括接口参数管理、状态管理以及如何在接口响应后更新表格数据和总记录数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<n-data-table
          remote
          ref="actionRef"
          :columns="columns"
          :data="tableData"
          :pagination="paginationReactive"
          :bordered="false"
          :max-height="550"
        />

//接口需要传的参数
const params = ref({
    term: '',
    current:1,
    size:10
  });

const paginationReactive = reactive({
    page: 1,
    pageSize: 10,
    showSizePicker: false,//每页显示选项
    pageSizes: [10, 20, 30],
    onChange: (page: number) => {//切换第几页时
      paginationReactive.page = page;
      params.value.current = page;
      getList(params.value).then((res) => {
        tableData.value = res.records;
        paginationReactive.itemCount = res.total;
      });
    },
    onUpdatePageSize: (pageSize: number) => {
      paginationReactive.pageSize = pageSize;
      paginationReactive.page = 1;
      params.value.current = 1;
      getOrgList(params.value).then((res) => {
        tableData.value = res.records;
        paginationReactive.itemCount = res.total;
      });
    }
  })

接口请求

onMounted(async () => {
    getList(params.value).then((res) => {
      tableData.value = res.records;
      paginationReactive.itemCount = res.total //总记录数
    });
  });

接口请求后需要设置下itemCount，否则只能出来一页

paginationReactive.itemCount = res.total