ant-design-vue/components/pagination/demo/custom-changer.md

1012 B

#### 自定义下拉选项 自定义下拉选项,例如添加全部选项 #### Custom dropdown options Customize dropdown options such as adding all options
<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!=='50'">{{props.value}}条/页</span>
        <span v-if="props.value==='50'">全部</span>
      </template>
    </a-pagination>
</template>
<script>
  export default {
    data() {
      return {
        pageSizeOptions: ['10', '20', '30', '40', '50'],
        current: 1,
        pageSize: 10,
        total: 50,
      }
    },
    methods: {
      onShowSizeChange(current, pageSize) {
        this.pageSize = pageSize
      },
    }
  }
</script>
<style scoped>
  .ant-select {
    margin-bottom: 0 !important;
  }
</style>