Ant Design Vue — Pagination and Steps

Photo by Jake Hills on Unsplash

Ant Design Vue or AntD Vue, is a useful UI framework made for Vue.js.

In this article, we’ll look at how to use it in our Vue apps.

Pagination

We can add pagination buttons with the a-pagination component.

For example, we can write:

<template>
  <div>
    <a-pagination v-model="current" :total="50" show-less-items/>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      current: 2
    };
  }
};
</script>

We have the a-pagination component with the v-model directive to bind the current page clicked to a reactive property.

total is the total number of pages.

show-less-items makes the button bar display fewer buttons.

We can listen to the showSizeChange event that is emitted when page size changes:

<template>
  <div>
    <a-pagination
      show-size-changer
      :default-current="3"
      :total="500"
      @showSizeChange="onShowSizeChange"
    />
  </div>
</template>
<script>
export default {
  name: "App",
  methods: {
    onShowSizeChange(current, pageSize) {
      console.log(current, pageSize);
    }
  }
};
</script>