Naive UI之数据表格 Data Table 分页

最新推荐文章于 2024-09-27 09:06:04 发布

aliceyang2012

最新推荐文章于 2024-09-27 09:06:04 发布

阅读量4.3k

点赞数 2

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

本文链接：https://blog.youkuaiyun.com/aliceyang2012/article/details/127805526

版权

vue 专栏收录该内容

14 篇文章

订阅专栏

<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