需求：后端返回1000条数据，只能前端做分页

template部分：

<div class="CollaborativeAllocation">
    <!-- 表格 -->
    <!-- 分页 -->
    <div class="pagination" v-if="displayedData?.length > 0">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[100, 200, 300, 400]"
        :size="size"
        :disabled="disabled"
        :background="background"
        layout="total, prev, pager, next,jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>

script部分

import { ref, onMounted, onUnmounted, watchEffect } from 'vue'


const currentPage = ref(1)
const pageSize = ref(10)
const size = ref('default')
const total = ref(0)
const disabled = ref(false)
const background = ref(false)
const tableData = ref([])//后端返回的数据


watchEffect(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  displayedData.value = tableData.value.slice(start, end)
  // console.log(displayedData.value)
})


// 每页条数变化时的处理函数
const handleSizeChange = val => {
  pageSize.value = val
  currentPage.value = 1 // 每次改变每页条数时，将当前页重置为第一页
}
const handleCurrentChange = val => {
  // console.log(`current page: ${val}`)
  currentPage.value = val
}