Open siluozhang516 opened 2 days ago
<template> <BasicTable :pagination="page" ref="tableRef" @change="getDataSource "/> </template> <script setup lang="ts"> import { reactive, ref,unref,onMounted } from 'vue import {BasicTable } from '@/components/Table const page = reactive({ current:1, pageSize:10 }) const tableRef = ref() onMounted (()=>{ getDataSource () }) const getDataSource = async()=>{ await getApiData () const { current, pageSize } = unref(tableRef ).getPaginationRef() page.current = current page.pageSize= pageSize } const getApiData = ()=>{ return new Promise((resolve)=>{ setTimeout(()=>{ resolve(true) },1000) }) } </script >
上面代码中,在切换分页信息时,getPaginationRef方法前面如果存在一个await获取异步数据,那么传递的page就会再次覆盖pagination组件的值,直接结果就是分页信息还是默认值,出现问题的代码在usePagination文件使用watch监听pagination。建议组件传递的默认值完全可以在初始化过程中执行一次赋值就行了,这样也不用每次去重新赋值page
上面代码中,在切换分页信息时,getPaginationRef方法前面如果存在一个await获取异步数据,那么传递的page就会再次覆盖pagination组件的值,直接结果就是分页信息还是默认值,出现问题的代码在usePagination文件使用watch监听pagination。建议组件传递的默认值完全可以在初始化过程中执行一次赋值就行了,这样也不用每次去重新赋值page