ant design vue Pagination 选择每页数量例子
ant design vue Pagination 分页组件,用来数据列表，ant design的分页组件几乎可以满足你所有的要求。
基础例子
例子
node.js webpack方式
<template>
<div>
<a-pagination
showSizeChanger
@showSizeChange="onShowSizeChange"
:defaultCurrent="3"
:total="500"
/>
<br />
<a-pagination
showSizeChanger
:pageSize.sync="pageSize"
@showSizeChange="onShowSizeChange"
:total="500"
v-model="current"
/>
</div>
</template>
<script>
export default {
data() {
return {
pageSize: 20,
current: 4,
};
},
watch: {
pageSize(val) {
console.log('pageSize', val);
},
current(val) {
console.log('current', val);
},
},
methods: {
onShowSizeChange(current, pageSize) {
console.log(current, pageSize);
},
},
};
</script>浏览器方式
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>ant design vue Pagination 选择每页分页数量例子</title>
<script src="//www.itxst.com/package/vue/vue.min.js"></script>
<script src="//www.itxst.com/package/ant-design-vue/antd.min.js"></script>
<!--浏览器方式下有些事件无法响应，需要引入vue-dash-event插件-->
<script src="//www.itxst.com/package/ant-design-vue/vue-dash-event.js"></script>
<link href="//www.itxst.com/package/ant-design-vue/antd.min.css" rel="stylesheet" />
<style>
body {
padding-top: 10px
}
</style>
</head>
<body>
<div id="app">
<a-pagination show-size-changer
:page-size.sync="pageSize"
v-on:show-size-change="onShowSizeChange"
:total="500"
v-model="current" />
</div>
<script>
Vue.use(window['vue-dash-event']);
var app = new Vue({
el: '#app',
data() {
return {
pageSize: 20,
current: 4,
};
},
watch: {
pageSize(val) {
console.log('pageSize', val);
},
current(val) {
console.log('current', val);
},
},
methods: {
//切换每页显示数量时事件
onShowSizeChange(current, pageSize) {
console.log("onShowSizeChange", current, pageSize);
},
},
});
</script>
</body>
</html>例子
