SOURCE

console 命令行工具 X clear

                    
>
console
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: {
      handleCurrentChange(val){
         return this.currentPage=val;
       },
      handleSelectionChange(rows) {  //当选择项发生变化时会触发该事件
        this.multipleSelection = rows
      },
      sortByProp(val1, val2) {  // 自定义排序方式:设置排序的内容项
        return val1 - val2
      },
    },
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@1.4.5/lib/index.js"></script>
<div id="app">
<template>
  <el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" 
            border 
            :row-key="getRowKeys"
            @selection-change="handleSelectionChange"
            style="width: 100%">
    <el-table-column type="selection"
      prop="selection"
      :resizable="false"
      :reserve-selection="true"
      width="55">
    </el-table-column>
    <el-table-column 
       prop="num" 
       label="编号" 
       sortable 
       :sort-method="sortByProp"
       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("//unpkg.com/element-ui@1.4.5/lib/theme-default/index.css");