el-pagination设置current-page无法更新视

current-page是Element-ui的pagination组件的当前页数设置。需求是返回这个页面的时候需要回到之前的页码数。然而当设置current-page获取表格之后却无法正确渲染。

page确实是5，但显示却不是

代码

<template>
  <div>
   <el-pagination :total="total" 
    :size='20' :current-page="filter.page"></el-pagination>
   <div>{{filter}}</div>
  </div>
</template>

<script>
export default {
  name: 'Test',
  data () {
    return {
      filter: {},
      total: 0
    }
  },
  mounted () {
    this.filter.page = 5
    this.change()
  },
  methods: {
    change () {
      // 模拟数据返回
      setTimeout(() => {
        this.total = 100
      }, 1000)
    }
  }
}
</script>

原因

• pagination组件会根据total重新计算page是在总页码之内,默认是1
  初始渲染
  这个时候传值是5，但total还没改变，所以传值无效。
• 那在获取到total之后再次赋值可以吗？

change () {
      // 模拟数据返回
      setTimeout(() => {
        this.total = 100
        this.filter.page = 5 // 再次赋值
      }, 3000)
    }

很可惜，还是不行

因为mounted的时候已经赋过值了，重新赋值，vue也判定为没有改变，所以不会重置。这里哪怕改变对象的指向，只要属性和属性值没变，依然不会造成视图更新。

解决方法：

mounted的时候另取变量存储page的值进行表格数据获取，在获取到total之后进行page更新