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");