对el-table和el-pagination组件二次封装


  如果是以elementUI作后管系统的UI库的话,很多页面基本都会用到el-table和el-pagination这两个组件用于数据的表格显示和分页,但是这个两个组件相对独立,于是再写了N次的el-table和el-pagination之后,我觉得是是时候需要把这两个东西封装起来了。对于我个人来说,是不喜欢封装组件的,虽然个人用起来很舒服,html标签可以少写很多,但是代码有时不是为了自己而写,因为考虑到之后如果接手你项目的攻城狮不会用或是用不习惯,那你抽成组件就反而是画蛇添足了。哈哈,主要还是像我后端同事说的,不会用还不是因为文档没写清楚,写的详细不就好了,你就是懒。

  按照产品经理说过的一致性原则,我们有些样式都可以css写好,反正是需要保持用户逻辑使用一致的。先上一个el-table-pagination组件的代码:





  然后,再贴上一个demo来展示如何使用:



  然后需要Vue.component()方法注册全局组件,这里就不推荐局部注册了,毕竟组件封装出来就是为了共用。最后,demo页面渲染出来如下:

  当然,我这里封装的组件是相对于自己业务需求的封装,二次封装代码也很简单,最后使用的时候还得做适应的调整。