pagination.vue
分页组件
<template>
<div class="block" style="margin-top: 15px">
<el-pagination
align="center"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[1,2,3,4,5]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="tableData.length"
>
</el-pagination>
</div>
</template>
<script>
export default {
name: "pagination",
props: {
tableData: {
type: Array,
},
currentPage: {
type: Number,
default: 1,
},
total: {
type: Number,
default: 20,
},
pageSize: {
type: Number,
default: 1,
},
},
data(){
return{
// currentPages:this.currentPage,
// pageSizes:this.pageSize
}
},
methods: {
handleSizeChange(val) {
this.$emit('handleSizeChange',val)
},
//当前页改变时触发 跳转其他页
handleCurrentChange(val) {
this.$emit('handleCurrentChange',val)
},
},
// watch:{
// currentPage(val){
// this.currentPages=val;
// },
// pageSize(val){
// this.pageSizes=val
// }
// }
};
</script>
<style>
</style>
父组件引用
<template>
<el-container>
<el-header>
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/login' }" :replace="true"
>返回登录页面</el-breadcrumb-item
>
<el-breadcrumb-item><a href="#">人员管理</a></el-breadcrumb-item>
</el-breadcrumb>
</el-header>
<el-main class="bgimage">
<div>
<div class="searchbox">
<el-input
maxlength="10"
clearable
v-model.trim="search"
size="mini"
placeholder="输入关键字搜索"
/>
</div>
<div class="tableData">
<el-table
highlight-current-row
ref="tableData"
align="center"
v-loading="loading"
:data="
tables.slice((currentPage - 1) * pageSize, currentPage * pageSize)
"
style="width: 100%; height: 100%"
:row-key="keyval"
:cell-class-name="tableCellClassName"
@cell-click="tabClick"
>
<el-table-column type="index"> </el-table-column>
<el-table-column prop="joindate" width="240">
<template slot="header" slot-scope="scope">
入职时间
<!-- <el-popover
placement="bottom"
trigger="manual"
v-model="visible"
>
<div style="text-align: center; margin-bottom: 20px">
选择查询日期期间
</div>
<div style="text-align: center; margin-bottom: 20px">
<el-date-picker
v-model="joinindate"
type="daterange"
range-separator="至"
start-placeholder="查询起始日期"
end-placeholder="查询结束日期"
format="yyyy-