vue3&ts 表格分页

<el-pagination :current-page="pagination.pageNumber" :page-size="pagination.pageSize" layout="->,total,prev,pager,next" :total="pagination.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />

const loading = ref(false)
let tableData = reactive([])
let pagination = reactive({
pageSize: 10,
pageNumber: 1,
total: 0,
currPage: 1在这里插入代码片
})

const props = defineProps({
config: {
type: Object,
default: () => ({
title: ‘’,
chartId: ‘’,
unit: ‘’,
color: []
})
},
searchParams: {
type: Object,
default: () => ({
value: {}
})
}
})

/**

• 请求数据
• @time 2023-10-25
  */
  async function getData() {
  try {
  loading.value = true
  // chartData.value = null
  let dimensionality = cloneDeep(props.searchParams.value.dimensionality)
  if (props.config.dimensionality) {
  dimensionality.push(…props.config.dimensionality)
  }
  let res = await getDigitalPage({
  chartId: props.config.chartId,
  pageInfo: {
  pageSize: pagination.pageSize,
  pageNo: pagination.pageNumber,
  currPage: pagination.currPage
  },
  dimensionality
  })
  if (res.data.length > 0) {
  tableData = res.data || []
  // pagination.total = res.page.total
  console.log(‘1111’, res.page.total)
  }
  pagination.total = res.page.total
  } catch (error) {
  console.log(error)
  }
  loading.value = false
  }

watch(
() => props,
() => {
nextTick(() => {
getData()
})
},
{ deep: true, immediate: true }
)

//当改变每页显示条数的选择器时会触发的事件
const handleSizeChange = (size) => {
pagination.pageSize = size
// 页容量回到第一页
getData()
}

//当改变当前页数的时候触发的事件
const handleCurrentChange = (page) => {
pagination.pageNumber = page
pagination.currPage = page
getData()
}