pagination.vue(组件页面的内容)
<template>
<!-- 这个是一个分页的组件 -->
<a-pagination
v-model="current"
:page-size-options="pageSizeOptions"
:total="total"
show-size-changer
:page-size="pagesize"
@change="change"
@showSizeChange="onShowSizeChange"
:pageSize.sync="currentPageSize"
:show-total="total => `共 ${total} 条`"
/>
</template>
<script>
export default {
name: 'my-pagination',
props: {
value: { // 当前页
type: Number,
},
hideOnSinglePage: {
type: Boolean,
default: false,
},
pagesize: {
type: Number,
default: 8,
},
pageSizeOptions: {
type: Array,
default () {
return [ '8', '16', '24', '32', ]
},
},
showQuickJumper: {
type: Boolean,
default: true,
},
showSizeChanger: {
type: Boolean,
default: true,
},
simple: {
type: Boolean,
default: false,
},
size: {
type: String,
default: '',
},
total: {
type: Number,
default: 1,
},
},
data () {
return {
current: this.value,
currentPageSize: this.pagesize,
}
},
watch: {
value (val) {
this.current = val
},
pagesize (val) {
this.currentPageSize = val
},
},
methods: {
change (pageno, pagesize) { //页码,条数
this.$emit('change', pageno, pagesize)
},
onShowSizeChange (current, size) { //条数变化的回调
this.$emit('onShowSizeChange', current, size)
},
},
}
</script>
使用组件:
<template>
<div>
<a-table :columns="columns" :data-source="data" :pagination="false">
<a slot="name" slot-scope="text">{{ text }}</a>
</a-table>
<!-- 分页组件 -->
<my-pagination
:total="total"
v-model="pageno"
:pageSize.sync="pagesize"
@change="handlePageChange"
@onShowSizeChange="onShowSizeChange"
></my-pagination>
</div>
</template>
<script>
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
scopedSlots: { customRender: 'name' },
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
width: 80,
},
{
title: 'Address',
dataIndex: 'address',
key: 'address 1',
ellipsis: true,
},
{
title: 'Long Column Long Column Long Column',
dataIndex: 'address',
key: 'address 2',
ellipsis: true,
},
{
title: 'Long Column Long Column',
dataIndex: 'address',
key: 'address 3',
ellipsis: true,
},
{
title: 'Long Column',
dataIndex: 'address',
key: 'address 4',
ellipsis: true,
},
];
const data = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park, New York No. 1 Lake Park',
tags: ['nice', 'developer'],
},
{
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 2 Lake Park, London No. 2 Lake Park',
tags: ['loser'],
},
{
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
tags: ['cool', 'teacher'],
},
];
import myPagination from "../../../components/pagination/pagination"; //引入
export default {
components: {
myPagination
},
data() {
return {
total: 0, //定义初始有多少条数据
pageno: 1, //默认第几页
pagesize: 8, //一页显示多少条数据
data,
columns,
};
},
methods:{
this.querysyJyz(){ //这个是向后台请求的数据函数
//自己写执行的内容
},
handlePageChange(pageno, pagesize) { //点击第几页触发的函数
this.pageno = pageno;
this.pagesize = pagesize;
this.querysyJyz(); //这个是向后台请求的数据函数
},
onShowSizeChange(current, size) { //改变每页显示条目数的函数
//pagesize 变化的回调
this.pageno = current;
this.pagesize = size;
this.querysyJyz(); //这个是向后台请求的数据函数
},
}
};
</script>