SOURCE

var Main = {
    data() {
      return {
        tableData: [],
        currentPage: 1,
        pagesize: 10,
        getRowKeys(row) {
          return row.num
        },
        multipleSelection: [],
      }
    },
  	computed: {
    },
  	mounted() {
      for (let i=1; i <= 100; i++) {
        this.tableData.push({
          num: i
        })
      }
    },
    methods: {
      getTableData1() {
        this.clearAllSelect()
        let arr = []
        for (let i=1; i <= 100; i++) {
          arr.push({
            num: i
          })
        }
        this.$nextTick(() => {
          this.tableData = arr
        })
      },
      getTableData2() {
        this.clearAllSelect()
        let arr = []
        for (let i=100; i >= 1; i--) {
          arr.push({
            num: i
          })
        }
        this.$nextTick(() => {
          this.tableData = arr
        })
      },
      clearAllSelect () { // 清除所有选项
        this.$refs.multipleTable.clearSelection()
      },
      handleCurrentChange(val){
         return this.currentPage=val;
       },
      handleSelectionChange(rows) {  //当选择项发生变化时会触发该事件
        this.multipleSelection = rows
      },
      sortChange(column, prop, order) { // 当表格的排序条件发生变化的时候会触发该事件
        if (column.order == 'ascending') {
          let arr = []
          for (let i=1; i <= 100; i++) {
            arr.push({
              num: i
            })
          }
          this.$nextTick(() => {
            this.tableData = arr
          })
        }
        if (column.order == 'descending') {
          let arr = []
          for (let i=100; i >= 1; i--) {
            arr.push({
              num: i
            })
          }
          this.$nextTick(() => {
            this.tableData = arr
          })
        }
      },
    },
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<div id="app">
<template>
  <el-button @click="getTableData1">切换表格数据1</el-button>
  <el-button @click="getTableData2">切换表格数据2</el-button>
  <el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" 
            border 
            :row-key="getRowKeys"
            ref="multipleTable"
            @selection-change="handleSelectionChange"
            @sort-change='sortChange'
            style="width: 100%">
    <el-table-column label="序号"
      prop="index"
      type="index"
      :index='(index)=>{return (index+1) + (currentPage-1)*pagesize }'
      :resizable="false"
      width="55">
    </el-table-column>
    <el-table-column type="selection"
      prop="selection"
      :resizable="false"
      :reserve-selection="true"
      width="55">
    </el-table-column>
    <el-table-column 
       prop="num" 
       label="编号" 
       sortable="custom"
       :sort-orders="['ascending', 'descending']"
       width="180">
    </el-table-column>
  </el-table>
  <el-pagination
    layout="total, prev, pager, next, jumper"
    :page-size="pagesize"
    :current-page.sync="currentPage"
    @current-change="handleCurrentChange"
    :total="tableData.length">
  </el-pagination>
</template>
</div>

@import url("https://unpkg.com/element-ui/lib/theme-chalk/index.css");