vue3+Ts结合Element-plus实现简单的为表格配置分页器功能

163 阅读1分钟

使用的技术栈都是当前最新的vite、vue3、elementPlus、Ts,仅展示el-table结合el-pagination的功能。作者亲测有效无毒。 一般这种功能都会封装成一个单独的组件,这里因为只作为演示,并未传递参数,所有数据都为自行mock。

  1. 引入表格和分页器

image.png

  1. 因为表格中的数据使用循环渲染上去,这里将表格数据和表头数据分开存放。(这里一定不要弄混了,一个是直接引入表格中,一个用来将表头循环出来。

image.png

image.png

image.png

3.最核心的无非就是将分页器的变化赋值给表格数据

image.png 用表格的源数据,根据当前页和每页条数来动态截取,直接用computed来监听,无需放入切换页码的事件中。 4.最后,附上效果图并阐明一下layout几个参数的解释:

image.png

image.png

ok,结束。