element 表格切换页面数据回显

在写业务过程中，遇到的需求是，element 表格切换分页器、和切换当前页面保留之前选中数据。

首先先介绍一下事件，官方文档里有，会的可以直接跳过。

1. @selection-change表示当前页选中的数据
2. @row-click表示点击当前行的事件（这个很重要，如果没就不会回显数据），并且返回值必须是当前行的唯一值

<el-table
        :data="tableData"
        ref="multipleTable"
        @selection-change="handleSelectionChange"
        @row-click="getRowKey"
      >
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
	<el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
</<el-table>
<el-row class="airport-pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page="page"
        :page-size="pageSize"
        layout="prev, pager, next, jumper"
        :page-count="pageTotal"
        :current-page.sync="currentPage"
      >
      </el-pagination>
</el-row>

在点击分页器的事件中要注意几个地方

1.添加 this.$nextTick(function () { })，这个是等待dom更新之后执行，要是没这句话，渲染就会有问题。

2.点击页码时候，我会判断vuex里有没有存储选中数据，有的话就渲染；然后用id比较，如果相同就渲染，toggleRowSelection不光要把渲染的数据传进来，另外还要true，要不然切换当前页，不会显示，也就是这个地方困扰了我好长时间。

<script>
  export default {
    data() {
      return {
        tableData: [{
          id:1,
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
   id:2,
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id:3,
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id:4,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id:5,
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        multipleSelection: []
      }
    },

    methods: {
      getRowKey (row) {
        return row.id
      },
      handleCurrentChange () {
       this.$nextTick(function () {
          if (this.$store.getters.Get_Value(' vuex数据 ')) {
            this.$store.getters.Get_Value(' vuex数据 ').map(items => {
              this.tableData.map((item,index) => {
                if (item.id === items.id) {
                  this.$refs.multipleTable.toggleRowSelection(item, true);
                }
              })
            })
          }
        })
      },
     handleSelectionChange (val) {
     	this.vuexData = this.$refs.multipleTable.selection
      }
    },
    destroyed() {
      this.$store.dispatch('vuex方法名',{
        name:'',
        data: this.vuexData
      })
    }
  }
</script>

加载页面时候，调用handleCurrentChange，就可以实现切换页面的数据回显。
如果有问题的可以在下面留言。