踩坑：使用elementUI+websocket，实现前端手动分页，多选栏（selection）可用

@1.

刚进入工作不久，第一次使用websocket，实现一个消息通知的实时刷新，百度了一下大概用了一下几个常用方法实现了数据的接收。

但是接收的数据，后端说只能每次都返回同样的JSON数组给我，即不能进行对应业务逻辑的判断（博主这里是区分已读未读），分页等数据也不能实现。

说干就干，业务逻辑可以通过遍历等判断，但是对于elementUI实现的el-pagination分页等，博主也不熟不太会。看了网上一些博主的文章，想实现前端分页，大致都写得不太详细，就有了这篇文章（小白博主第一次发文OvO）

@2.

由于开发环境下数据量不够多，博主用了静态数组模拟websocket接收到的数组。

因为是我们前端自己对整个数组进行分页操作，所以el-table绑定的数据要我们来自己拆：

 

 

 这里的pageIndex是当前页码，pageSize是页面的数据量，相当于我们每个页面只显示对应需要的数据了

el-pagination里面的total我这边绑定了tempArr的length

效果大致是这样：

@3.

但是我需要实现前面的多选栏也因为我们自己绑定data是进行过拆分的没办法正常使用了。这里我看了很多帖子好像都没有说到这个问题的解决办法，

楼主参考了一下elementUI的table文档，有一个reserve-selection和row-key属性，配合使用可以实现优化table的渲染和翻页数据保存，这是代码：

       绑定行数据的key，写一个对应的方法，这里row.id可以换成你需要绑定的任意属性，实现唯一性就行。

 

 

   这里是多选栏，让我们把reserve-selection设为true

就大功告成拉，看一下最后成果

 

 

 PS：纪念一下自己的第一篇blog，一起进步