Naive UI n-data-table 分页试用

版本
“naive-ui”: “^2.37.3”,
“ts-node”: “^10.9.2”,
“typescript”: “~4.5.4”,
“vue”: “^3.4.14”

官方示例
https://www.naiveui.com/zh-CN/os-theme/components/data-table#ajax-usage

      <template #2>
        <!-- 展示信息 -->
        <n-data-table
          remote
          :columns="columns"
          :data="order_data_list"
          :pagination="pagination"
          :row-key="rowKey"
          :bordered = "true"
          :striped="true"
        />
      </template>
      <script setup lang="ts">
      	import {NButton,NSpace,NSelect,NSplit,NCard, FormInst,FormItemInst,FormItemRule,useMessage,FormRules,NInput,NForm,NFormItem,
NRow,NCol,NDataTable} from 'naive-ui'
		import { onMounted,ref, VNode,reactive} from 'vue';
		const data_list = ref<Array<any>>() // 获取到的订单总数据，因为获取到的数据为总数据，并没有分页相关数据，所以维护了一个data_list 总数据(类似于缓存吧)，下面的order_data_list 为实际展示的值。
		const order_data_list = ref<Array<any>>([]) // 订单数据展示列表
		const pagination = reactive({
	      page: 1,//当前页数
	      pageSize: 5,// 当前页大小
	      disabled:false,
	      showSizePicker: true,
	      pageSizes: [5, 10, 15,20,25],
	      pageCount:0, // 总页数
	      itemCount: 0,// 总数量
	      onChange: (page: number) => {
	        pagination.page = page
	        // 进入到了下一页
	        pageDate(page)
	      },
	      onUpdatePageSize: (pageSize: number) => {
	        // 修改了 页的大小需要重新回归第一页
	        pagination.pageSize = pageSize
	        pagination.page = 1
	        pageDate(1)
	      }
    }) // 分页数据
// 需要指定一个唯一key
const rowKey = (rowData:any) => {return rowData.id}
// 表单头部初始化，title:展示名字，key:关联数据元素
const columns =  ref([
  {
    title:'个数',
    key:'id'
  },
  {
    title:'xxx',
    key:'xxxx'
  },
  {
    title:'xxxx',
    key:'xxxxx'
  },
  {
    title:'xxxxx',
    key:'xxxx'
  },
  {
    title:'xxx',
    key:'xxxxxx'
  }
]) // 数据集合头部


// 获取到所有订单 ，按钮或挂载时调用
function getOrderAllList(){
  loading_order.value = true // 加载状态
  window.electronAPI.getOrderAllList()
  .then(data => {
    console.log('getOrderAllList: ',data)
    if(data.code == 0){
	    data_list.value = data  // 把数据缓存到总数据
	    pageDate(1)
    }else{
    messages.error('执行失败:'+data.message,{duration: 3000})
    }
  }).catch(err => {
      console.log('异常: ',err);
      messages.error('执行失败:'+err,{duration: 3000})
  })
  loading_order.value = false // 加载状态
}
// 分页展示函数
const pageDate = (pageNumber:number) =>{
  order_data_list.value = []
  if(pageNumber==0){
    pageNumber = 1
  }
  pagination.itemCount= data_list.value.length
  pagination.pageCount=data_list.value.length/pagination.pageSize
  // 第一页0~4 ，第二页5~9，类推
  for(let i=(pageNumber-1) * pagination.pageSize; i < pageNumber * pagination.pageSize  ;i++){
    order_data_list.value.push(data_list.value[i])
    if(i==data_list.value.length-1){
      return
    }
  }
}
      </script>