版本
“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-tableremote: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 = pageSizepagination.page = 1pageDate(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.lengthpagination.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>
)
