在编写table页面的时候会伴随有分页的实现,项目使用的是iView的Page,代码如下:
<Page
class="page-box"
:total="childMsg.total"
show-elevator
show-sizer
show-total
:transfer="true"
:page-size="childMsg.pageSize"
:page-size-opts="[10, 20, 30, 40]"
:current="childMsg.currentPage"
@on-change="handleCurrentChange"
@on-page-size-change="handleSizeChange"
/>
当切换成每页40条数据时,会出现下拉框错位的问题,如下图:
看了官网之后发现了这个:
【iView组件Page官网地址:http://v4.iviewui.com/components/page】
好吧,当时确实没看明白这个属性的描述,网上搜了一下就知道了,在Page中加上:transfer="true"就不会出现样式错乱问题了,修改后的代码如下:
<Page
class="page-box"
:total="childMsg.total"
show-elevator
show-sizer
show-total
:transfer="true"
:page-size="childMsg.pageSize"
:page-size-opts="[10, 20, 30, 40]"
:current="childMsg.currentPage"
@on-change="handleCurrentChange"
@on-page-size-change="handleSizeChange"
/>
前端小白积累经验篇~~