【Vue3 + Element Plus】纯前端实现本地数据分页

先附上效果图

Vue3 + Element Plus 实现本地分页

首页弹窗代码

<el-table :data="tableData" style="width: 100%" border stripe>
  <el-table-column v-for="{ id, prop, label } in tableColumn" :prop="prop" :key="id" :label="label" :width="label == '序号' ? 100 : ''" align="center" />
  <el-table-column fixed="right" label="操作" align="center" width="240">
    <template #default="scope">
      <el-button link type="primary" size="small" @click="handlEmodify(scope.row)">编辑</el-button>
      <el-button link type="primary" size="small" @click="handleDel(scope.row)">删除</el-button>
      <el-button link type="primary" size="small" @click="handlDetail(scope.row)">查看</el-button>
    </template>
  </el-table-column>
</el-table>
// 分页组件 这里二次封装了一下
<pagination class="pagination" :total="total" :pageNo="pageNo" :pageSize="pageSize" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" />

import { ref, onMounted, defineComponent, reactive } from 'vue'
import { ElMessage } from 'element-plus'
// mock数据 也可以自己写到页面上
import { getTableList } from '@/api/home.js'
// 二次封装的分页组件
import pagination from './components/pagination.vue'
// 循环渲染 tableColumn 数据
const tableColumn = ref([
  { id: 1, prop: 'id', label: '序号' },
  { id: 2, prop: 'date', label: '时间' },
  { id: 3, prop: 'name', label: '姓名' },
  { id: 4, prop: 'address', label: '地址' }
])
// 当前页
const pageNo = ref(1)
// 当前大小
const pageSize = ref(10)
// 从接口获取的所有数据
const tableData = ref([])
// 筛选条数
const total = ref(0)
// 总条数
const filterData = reactive({
  data: []
})

// 初始化表格
const initTable = async () => {
  let res = await getTableList()
  // 不存在 data 说明没有数据 中断代码执行
  if (!res.data) return false
  // 全部数据赋值给 filterData
  filterData.data = res.data
  // 赋值总条数给 total
  total.value = res.total
  // 分页逻辑在这里体现
  let start = pageNo.value > 1 ? (pageNo.value - 1) * pageSize.value : 0
  let end = pageNo.value * pageSize.value
  // 将符合条件的数据赋值给 tableData
  tableData.value = res.data.slice(start, end)
}

// 分页大小事件触发此方法
const handleSizeChange = val => {
  pageNo.value = 1
  pageSize.value = val
  initTable()
}
// 分页数事件触发此方法
const handleCurrentChange = val => {
  pageNo.value = val
  initTable()
}

pagination 组件

<template>
  <el-pagination background :current-page="props.pageNo" :page-sizes="[10, 20, 30, 50]" :page-size="props.pageSize"
    layout="total, sizes, prev, pager, next, jumper" :total="props.total" @size-change="handleSizeChange"
    @current-change="handleCurrentChange" />
</template>

const props = defineProps(['total', 'pageNo', 'pageSize'])
const emit = defineEmits(['handleSizeChange', 'handleCurrentChange'])

const handleSizeChange = val => { emit('handleSizeChange', val) }
const handleCurrentChange = val => { emit('handleCurrentChange', val) }