自带分页与loading的表格封装

51CTO 20220906

  • 智能硬件
  • 前端开发

首先就是新建一个组件，名字就叫做​​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​​就写完了，完整代码如下



查看全文

点赞

51CTO

作者最近更新

  • 数据治理如何服务于AL/ML系统
    51CTO
    2022-10-21
  • 云上的DevOps人为什么会崩溃？
    51CTO
    2022-10-19
  • 自动化的可视化测试的未来发展趋势
    51CTO
    2022-10-20

期刊订阅

相关推荐

  • 用加速度传感器预测用户情绪变化被证明是可行的

    2018-12-21

  • 谷歌手部运动传感器获批 可进行虚拟触控

    2019-01-04

  • 世界睡眠日，人工智能该如何改善我们的睡眠？

    2019-03-25

  • 新国标正式实施，电动车安全性能面临新挑战

    2019-04-30

评论0条评论

×
私信给51CTO

点击打开传感搜小程序 - 速览海量产品,精准对接供需

  • 收藏

  • 评论

  • 点赞

  • 分享

收藏文章×

已选择0个收藏夹

新建收藏夹
完成
创建收藏夹 ×
取消 保存

1.点击右上角

2.分享到“朋友圈”或“发送给好友”

×

微信扫一扫，分享到朋友圈

推荐使用浏览器内置分享功能

×

关注微信订阅号

关注微信订阅号，了解更多传感器动态

  • #{faceHtml}

    #{user_name}#{created_at}

    #{content}

    展开

    #{like_count} #{dislike_count} 查看评论 回复

    共#{comment_count}条评论

    加载更多

  • #{ahtml}#{created_at}

    #{content}

    展开

    #{like_count} #{dislike_count} #{reback} 回复

  • #{ahtml}#{created_at}

    #{content}

    展开

    #{like_count} #{dislike_count} 回复

    • 关闭
      广告