vue实现分页查询记录

问题描述：

实现分页查询功能时会出现>5页时，右边页码数随着点击事件而增多，right的限定出现问题。但是无法通过pop与push方法同时改动值，否则会出现页面崩溃。无法定长。

 

问题分析：

没有确定页码个数定长，需要找到适合的方法限定条件。

目标效果如图：

 

 

解决方法：

由于条件判断公告类型也会影响页码查询，因此合并原本的两个Vue，将定义的几个值放在同一个getData函数中，this指针指向的同一个info。再使用computed，修改定长为5。（该方法比较生硬，不建议多使用。有待挖掘新方法）。

如下图：

 

 

 

 

 

问题优化：

可以使用element插件会更高效快捷。如图：