通过vue2实现自定义分页组件具备基础功能外，另加功能有显示总条数、调整每页显示条数，请给出最简洁的详细代码，并给出每段代码的中文注释

以下是最简洁的实现自定义分页组件具备基础功能外，并显示总条数、调整每页显示条数的代码，带有详细的中文注释：

<template>
  <div>
    <!-- 显示数据 -->
    <ul>
      <li v-for="item in displayedData" :key="item.id">{{ item }}</li>
    </ul>

    <!-- 显示总条数 -->
    共 {{ total }} 条数据

    <!-- 调整每页显示条数 -->
    <select v-model="pageSize" @change="changePageSize">
      <option v-for="option in pageSizeOptions" :value="option">
        {{ option }} 条/页
      </option>
    </select>

    <!-- 分页 -->
    <div>
      <button :disabled="currentPage === 1" @click="prevPage">上一页</button>
      <span>第 {{ currentPage }} 页，共 {{ totalPages }} 页</span>
      <button :disabled="currentPage === totalPages" @click="nextPage">下一页</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页显示条数
      pageSizeOptions: [10, 20, 30], // 每页显示条数的选项
      total: 100, // 数据总条数
      data: [], // 所有数据
    };
  },
  computed: {
    displayedData() {
      // 根据当前页码和每页显示条数计算需要展示的数据
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.data.slice(start, end);
    },
    totalPages() {
      // 计算总页数
      return Math.ceil(this.total / this.pageSize);
    },
  },
  methods: {
    prevPage() {
      // 上一页
      this.currentPage--;
    },
    nextPage() {
      // 下一页
      this.currentPage++;
    },
    changePageSize() {
      // 改变每页显示条数时重新计算总页数和当前页码
      this.currentPage = 1;
      this.totalPages = Math.ceil(this.total / this.pageSize);
    },
  },
};
</script>