1、使用的环境Vue2.0+element-ui
下面场景下默认您已经安装了element-UI并引用
2、创建paging.vue
可以对分页进行单页多条展示
<template>
<div class="paging">
<el-pagination background layout="total, sizes, prev, pager, next"
@current-change="currentChange"
@size-change="handleSizeChange"
:page-sizes="[10, 15,20, 50, 100]"
:current-page="currentPage"
:page-size="pageSize" :total="total">
</el-pagination>
</div>
</template>
<script>
export default {
components: {},
props:{
currentPage:{
type:Number,
default:1
},
pageSize:{
type:Number,
default:10
},
total:{
type:Number,
required:true
}
},
data() {
return {
}
},
methods:{
handleSizeChange(size) {
this.$emit('size-change',size)
},
//分页
currentChange(page) {
this.$emit('current-change',page)
}
}
}
</script>
<style>
</style>
3、父级组件father.vue引入paging模块
<template>
<div class="botanyTable">
<el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" border
style="width: 100%">
<template v-for="(item,index) in tableList">
<el-table-column :prop="item.prop" :label="item.label"></el-table-column>
</template>
<el-table-column label="操作" width="150">
<template slot-scope="scope">
<el-button type="text" size="small" @click="openEdit(scope.row)">编辑</el-button>
<el-button type="text" size="small" @click="deleteList(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<paging :current-page="currentPage" :page-size="pageSize" :total="tableData.length"
@current-change="currentChange" @size-change="handleSizeChange"></paging>
</template>
<script>
import paging from '../components/common/paging.vue'
export default {
components: {
paging
},
data() {
return {
pageSize: 10,
currentPage: 1,
tableData:[],//项目开发中tableData数据从后台获得
tableList: [{
prop: 'adminName',
label: '用户名'
},
{
prop: 'phoneNumber',
label: '手机号'
},
{
prop: 'permission',
label: '权限'
}
],
},
methods:{
handleSizeChange(currentPageSize) {
this.pageSize = currentPageSize;
},
//分页
currentChange(currentPage) {
this.currentPage = currentPage;
},
openEdit(item){
},
deleteList(item){
}
}
}
</script>