当后端不方便提供数据分页查询接口时，就需要前端来自己分割进行分页操作

在有可能的情况下还是建议用分页查询接口，减少网络数据传输

首先el-table绑定数组

 分页组件，变量自己定义防止报错

 <el-pagination
              layout="->, total, sizes, prev, pager, next"
              :total="totalHeatSource"
              :current-page="pageNumberHeatSource"
              :page-size="pageSizeHeatSource"
              @current-change="handleCurrentChangeHeatSource"
              @size-change="handleSizeChangeHeatSource"
              :page-sizes="[5, 10, 15, 20]"
              background
            />

先从接口一次性返回所有数据（几百条数据还不算卡，成千上万条数据时，避免前端做分页，或者懒加载）

const get_heatsource = () => {
  parametersuperApi.get_heatsource_api(regulatoryBodiesId.value).then((res: any) => {
    if (res.errorcode == 0) {
      if (res.data.length != 0) {
        tableDataHeatSource.value = res.data
        totalHeatSource.value = res.data.length
      }
    } else {
      ElMessage.error(res.message)
    }
  })
}

 利用slice方法来进行数据分页，代码里缺少的当前页和每页个数自行定义

const get_heatsource_page_data = () => {
  tableDataHeatSourcePageData.value = tableDataHeatSource.value.slice(
    (pageNumberHeatSource.value - 1) * pageSizeHeatSource.value,
    pageNumberHeatSource.value * pageSizeHeatSource.value
  )
}

 如果当前页或者每页个数变化时都需要重新对原始数据进行切割分组，当每页个数切换变化时，需要把当前页置为第一页，因为数据总条数不变情况下，每页个数改变，页签会重新计算有几页分多少页

const handleSizeChangeHeatSource = (val: number) => {
  pageSizeHeatSource.value = val
  pageNumberHeatSource.value = 1
  get_heatsource_page_data()
}
const handleCurrentChangeHeatSource = (val: number) => {
  pageNumberHeatSource.value = val
  get_heatsource_page_data()
}

最后，当数据量过大时还是建议让后端写分页查询接口，否则前端分页会大大浪费性能和造成页面卡顿，几十条几百条还能应付