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>