Ant Design Vue教程
ant design vue Pagination 自定义下拉选项
ant design vue Pagination可以自定义下拉选项，比如10条每页、20条每页、10台每页、20台每页。
node.js webpack方式
<template>
<a-pagination
:pageSizeOptions="pageSizeOptions"
:total="total"
showSizeChanger
:pageSize="pageSize"
v-model="current"
@showSizeChange="onShowSizeChange"
>
<template slot="buildOptionText" slot-scope="props">
<span v-if="props.value!=='100'">{{props.value}}台/页</span>
<span v-if="props.value==='100'">全部数据</span>
</template>
</a-pagination>
</template>
<script>
export default {
data() {
return {
pageSizeOptions: ['30', '50', '100'],
current: 1,
pageSize: 30,
total: 500,
};
},
methods: {
onShowSizeChange(current, pageSize) {
this.pageSize = 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"
:page-size-options="pageSizeOptions"
>
<template slot="buildOptionText" slot-scope="props">
<span v-if="props.value!=='100'">{{props.value}}台/页</span>
<span v-if="props.value==='100'">全部数据</span>
</template>
</a-pagination>
</div>
<script>
Vue.use(window['vue-dash-event']);
var app = new Vue({
el: '#app',
data() {
return {
pageSizeOptions: ['30', '50', '100'],
pageSize: 30,
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>