问题描述:一个页面通过切换单选按钮可以展示不同的表格,且这多个表格公用同一个分页组件。当切换单选按钮时,更换表格,这时我们希望展示新表格的第一页,且分页组件的第一页有蓝色的高亮背景色。但是实际的效果是展示新表格的第一页,但是分页组件的第一页没有蓝色的高亮背景色。
原因猜想:将页码置为1,可能并不能导致分页器中当前页的重新渲染。
解决办法:
做两点改动可以解决此问题:
1.给el-pagination添加一个v-if="showPagination",showPagination默认值为true,即显示分页器
2.当切换单选按钮时,在change事件里回调函数中:写以下逻辑
handleChangeOrdio(val){
this.showPagination=false;//不显示分页器
this.$nextTick(()=>{
this.currPage=1;//将当前页置为1
this.total=null;//总数置空,这样当新表格数据到来之前,表格不显示总条数,且不显示页码,以免造成误解
this.tableData=[];//表格内容置空
this.showPagination=true;//重新显示分页器
this.getTableData(val);//根据单选按钮选中的值,请求表格数据,单选按钮的值不同,请求不同表格的数据
})
}
原理大概如下:使用变量showPagination控制分页器的存在或者不存在,且使用$nextTick,可使分页器重新渲染,从而解决第一页没有蓝色的高亮背景色的问题。在实验的过程中发现:showPagination变量和$nextTick缺一不可。
解释:这个解决办法并不优雅,甚至可以说很笨拙,如果大家有更好的办法,欢迎评论。