对于一个经常写管理端系统的前端来说,写分页是一件绕不过去的事情;一般的做法是将分页与表格封装在一个组件里,在渲染列表时,通过触发changePage
和changeSize
分页事件来渲染分页列表。
但是无论怎样去封装,总要写分页事件去触发分页,有没有办法就连分页事件也可以不写就直接实现分页的逻辑呢?毕竟每次都要写这两个事件也是很繁琐;
在最近的项目里,我尝试了另一种方法去实现分页效果,从分页中解脱出来;
混入提供了一种非常灵活的方式,分发
Vue
组件中的可复用功能;一个混入对象可能包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混合进入该组件本身的选项。
上述摘自Vue
官网的描述,我认为有两点是值得注意的:
这两点是我此次尝试的基础;
我们首先来定义一个混入,将分页的template
代码写在methods
里;同时编辑好分页事件,在分页事件内部写好执行逻辑;
export default { data () { return { paging: { currentNo: 1, pageSize: 10, }, total: 0, } }, methods: { sizeChange (val) { this.paging.pageSize = val // 分页事件后要执行的逻辑 this.getList() }, currentChange (val) { this.paging.currentNo = val // 分页事件后要执行的逻辑 this.getList() }, renderPage () { return <el-pagination class="m-t-20 m-b-20 t-a-r" current-page={this.paging.currentNo} on-size-change={this.sizeChange} on-current-change={this.currentChange} page-sizes={[10, 20, 40, 50]} page-size={this.paging.pageSize} layout="total, sizes, prev, pager, next, jumper" total={this.total} background> </el-pagination> }, }, } 复制代码
然后我们就可以在组件里使用了!在需要渲染分页的地方执行renderPage
事件,就可以让分页出现在我们希望的位置;
import TableList from './components/list' import pageMixin from '@/components/pageChange/index.js' export default { name: 'test', components: { TableList, }, mixins: [pageMixin], data () { return { tableData: [], } }, mounted () { this.getList() }, methods: { async getList (paging) { const { data } = await https.getList({ ...this.paging }) this.tableData = data this.total = data.totalElements }, }, render () { return <div class="page"> <table-list table-data={this.tableData} /> {this.renderPage()} </div> }, } 复制代码
这种方法在页面只有一个表格时很方便,但是缺少了灵活性,比如分页事件后调用的方法名就是写死的,如果有更复杂的逻辑或许就要更改混入对象的配置了;并且该方法也只在单表格页面使用过,还没试过多表格的情况;
如果有小伙伴有其它的建议或者有更好更成熟的写列表页的方法,欢迎留言讨论讨论~