vue+elementUI 多个表格公用一个分页组件遇到的问题

问题描述：一个页面通过切换单选按钮可以展示不同的表格，且这多个表格公用同一个分页组件。当切换单选按钮时，更换表格，这时我们希望展示新表格的第一页，且分页组件的第一页有蓝色的高亮背景色。但是实际的效果是展示新表格的第一页，但是分页组件的第一页没有蓝色的高亮背景色。

原因猜想：将页码置为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缺一不可。

解释：这个解决办法并不优雅，甚至可以说很笨拙，如果大家有更好的办法，欢迎评论。