ElementUI实现表格分页功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表格数据分页</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="vue">
<el-table :data="table_list.slice((currentPage-1)*pagesize,currentPage*pagesize)"
:default-sort="{prop: 'date', order: 'descending'}" height="450" border style="width: 100%" stripe
highlight-current-row>
<el-table-column label="序号">
<template slot-scope="scope">
{{scope.$index+1}}
</template>
</el-table-column>
<el-table-column prop="date" label="工号">
</el-table-column>
<el-table-column prop="name" label="姓名">
</el-table-column>
<el-table-column prop="address" label="职位">
</el-table-column>
<el-table-column fixed="right" label="操作" width="100">
<template slot-scope="scope">
<el-button type="text" size="small">移除
</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
:page-sizes="[10, 20, 50, 100]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper"
:total="table_list.length">
</el-pagination>
</div>
</body>
<script src="http://cdn.suoluomei.com/common/js2.0/vue/v2.5.16/vue.js"></script>
<script src="https://cdn.suoluomei.com/common/js2.0/element-ui/2.12/lib/theme-chalk/index.js"></script>
<script>
new Vue({
el: '#vue',
data: {
table_list: [{
date: '20160503',
name: '王小虎',
address: '销售'
}, {
date: '20160502',
name: '王小虎',
address: '销售'
}, {
date: '20160504',
name: '王小虎',
address: '销售'
}, {
date: '20160501',
name: '王小虎',
address: '销售'
}, {
date: '20160508',
name: '王小虎',
address: '销售'
}, {
date: '20160506',
name: '王小虎',
address: '销售'
}, {
date: '20160507',
name: '王小虎',
address: '销售'
}],
currentPage: 1,
pagesize: 10,
},
methods: {
handleSizeChange: function (size) {
this.pagesize = size;
},
handleCurrentChange: function (currentPage) {
this.currentPage = currentPage;
}
}
})
</script>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019-11-11 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读