自带分页与loading的表格封装

总篇164篇 2022年第39篇我们的后台系统，大部分的表格都带有分页和loading，为了不做重复的工作，基于element-ui封装了一个自带分页与loading的组件，下面大致介绍一下我的设计思路首先就是新建一个组件，名字就叫做PageTable，template里面很简单，放上表格和分页。既然表格默认带有分页，分页的数据就放在组件内部之后开始思考一个问题，就是表格的数据是从父组件传进来，还是放在组件自身。如果放在父组件里面，那么分页的变化每次都要emit事件通知父组件，这样我们把分页和表格合在一起就失去了意义，所以表格的数据是要放在组件自身的。表格数据放在自身，父组件就需要传进来一个获取数据的方法，就叫做fetchData吧，在组件内部调用这个方法，就可以获取数据了。这个方法是需要知道当前分页的，并且返回数据和总条数，由此就可以定义fetchData了interface?ResponseStructure?{data:?any[];total:?any;}interface?fetchData?{(current:?number,?size:?number):?Promise}现在我们的组件已经变成了这个样子表格一般都会带有搜索项，搜索参数等在父组件定义，并且逻辑写在fetchData里即可，组件内部只处理通用的逻辑。父组件里点击了搜索按钮，是要触发获取事件的，父组件可以通过$refs调用组件内部方法。目前我们定义了两个方法search与getTableData，点击搜索调用search就可以了，并且会自动重置分页，如果有不想重置分页的情况，可以调用getTableData。目前为止，数据我们已经有了，但是并没有展示，因为element-ui的列信息(Table-column)是通过插槽的，我们使用slot接收一下就可以了到了这里基本逻辑已经完成了，再进一步，一般我们的表格需要loading，loading应该由父组件自己决定如何使用，但是状态的改变由本组件处理，这里可以使用.sync修饰符，loading逻辑加在?getTableData中即可loading也加完了，功能就已经完成了，但是还存在一些问题，el-table有很多的Attributes、Events和Methods，Attributes和Events我们透传给el-table即可，Methods需要el-table的ref，如果父组件直接使用ref，获取的是组件外层的div，无法获取到el-table的ref，我们暴露一个方法抛出el-table的ref即可至此，PageTable就写完了，完整代码如下作者简介马春键2021年加入汽车之家，目前任职于主机厂技术部前端组，主要负责数科前端业务，前端前沿技术探索等工作。阅读更多：面向推荐的汽车知识图谱构建基于Flink+Starrocks建设之家广告实时数据基于CodeSmith提高开发效率