使用的技术栈都是当前最新的vite、vue3、elementPlus、Ts,仅展示el-table结合el-pagination的功能。作者亲测有效无毒。 一般这种功能都会封装成一个单独的组件,这里因为只作为演示,并未传递参数,所有数据都为自行mock。
- 引入表格和分页器
- 因为表格中的数据使用循环渲染上去,这里将表格数据和表头数据分开存放。(这里一定不要弄混了,一个是直接引入表格中,一个用来将表头循环出来。)
3.最核心的无非就是将分页器的变化赋值给表格数据
用表格的源数据,根据当前页和每页条数来动态截取,直接用computed来监听,无需放入切换页码的事件中。
4.最后,附上效果图并阐明一下layout几个参数的解释:
ok,结束。