vbenjs / vue-vben-admin

A modern vue admin. It is based on Vue3, vite and TypeScript. It's fast!
https://vben.vvbin.cn/
MIT License
22.88k stars 6.24k forks source link

getPaginationRef获取分页信息存在有些情况下不改变问题 #3942

Open siluozhang516 opened 2 days ago

siluozhang516 commented 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