用混入的方式写分页-Vue管理端项目分页写法新尝试
2020/4/3 11:31:16
本文主要是介绍用混入的方式写分页-Vue管理端项目分页写法新尝试,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
前言
对于一个经常写管理端系统的前端来说,写分页是一件绕不过去的事情;一般的做法是将分页与表格封装在一个组件里,在渲染列表时,通过触发changePage
和changeSize
分页事件来渲染分页列表。
但是无论怎样去封装,总要写分页事件去触发分页,有没有办法就连分页事件也可以不写就直接实现分页的逻辑呢?毕竟每次都要写这两个事件也是很繁琐;
在最近的项目里,我尝试了另一种方法去实现分页效果,从分页中解脱出来;
Mixin 混入
混入提供了一种非常灵活的方式,分发
Vue
组件中的可复用功能;一个混入对象可能包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混合进入该组件本身的选项。
上述摘自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> }, } 复制代码
思考
这种方法在页面只有一个表格时很方便,但是缺少了灵活性,比如分页事件后调用的方法名就是写死的,如果有更复杂的逻辑或许就要更改混入对象的配置了;并且该方法也只在单表格页面使用过,还没试过多表格的情况;
如果有小伙伴有其它的建议或者有更好更成熟的写列表页的方法,欢迎留言讨论讨论~
这篇关于用混入的方式写分页-Vue管理端项目分页写法新尝试的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04package.json 文件位置在哪?-icode9专业技术文章分享
- 2024-10-01Craco.js学习:从入门到实践指南
- 2024-10-01Create-React-App学习:入门与实践指南
- 2024-10-01CSS-in-JS学习:从入门到实践指南
- 2024-09-30JSX语法学习:从入门到初步掌握
- 2024-09-30Mock.js学习:入门教程与实战演练
- 2024-09-30React Hooks学习:从入门到实践
- 2024-09-30受控组件学习:React中的基础入门教程
- 2024-09-29JS定时器教程:初学者必看指南
- 2024-09-29JS对象教程:初学者的全面指南