【区分vue2和vue3下的element UI Pagination 分页组件，分别详细介绍属性，事件，方法如何使用，并举例】

在 Vue 2 的 Element UI 和 Vue 3 的 Element Plus 中，Pagination 分页组件的功能和用法大部分相似，但也有一些细节上的差异。以下是对两个版本下 Pagination 组件的属性、事件和方法的详细介绍，并给出使用示例。

Vue 2 + Element UI Pagination

属性 (Attributes)

• small: 是否使用小型分页样式。
• background: 是否为分页按钮添加背景色。
• layout: 组件布局，子组件名用逗号分隔。
• total: 总条目数。
• current-page: 当前页码，支持 .sync 修饰符。
• page-sizes: 每页显示个数选择器的选项设置。
• page-size: 每页显示的条目个数。
• pager-count: 页码按钮的数量，当总页数超过该值时会进行分页。
• disabled: 是否禁用分页。
• hide-on-single-page: 只有一页时是否隐藏分页器。
• show-elevator: 是否显示电梯（快速跳转至某页）。
• show-pager: 是否显示总条目数和总页码。
• show-total: 是否显示总条目，当为函数时，会传入当前分页信息，函数返回显示的内容。
• simple: 是否为简洁版分页。
• prev-text: 替代图标显示的上一页文字。
• next-text: 替代图标显示的下一页文字。

事件 (Events)

• size-change: 每页显示个数改变时会触发。
• current-change: 当前页码改变时会触发。

方法 (Methods)

Pagination 组件在 Element UI 中通常没有直接暴露的方法，主要是通过修改它的属性和监听事件来与其交互。

示例

<template>
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="[10, 20, 30, 50]"
    :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="100">
  </el-pagination>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10
    };
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    }
  }
};
</script>

Vue 3 + Element Plus Pagination

在 Vue 3 和 Element Plus 中，Pagination 组件的属性、事件和用法与 Vue 2 中的 Element UI 非常相似，但可能会添加或移除一些属性、事件和方法。

属性 (Attributes)

大部分属性与 Vue 2 中的 Element UI 相同，但可能会有一些细微的差别或新增的属性。

事件 (Events)

事件也大部分相同，但可能会有一些细微的差别或新增的事件。

方法 (Methods)

同样，Pagination 组件在 Element Plus 中通常也没有直接暴露的方法，主要是通过修改它的属性和监听事件来与其交互。

示例

在 Vue 3 中使用 <script setup> 语法糖时，示例将略有不同：

<template>
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    v-model:currentPage="currentPage"
    :page-sizes="[10, 20, 30, 50]"
    v-model:pageSize="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="100">
  </el-pagination>
</template>

<script setup>
import { ref } from 'vue';

const currentPage = ref(1);
const pageSize = ref(10);

function handleSizeChange(val) {
  pageSize.value = val;
}

function handleCurrentChange(val) {
  currentPage.value = val;
}
</script>

请注意，由于 Element Plus 还在不断发展中，上述内容可能会随着版本的更新而有所变化。建议查阅最新的官方文档以获取最准确的信息。

原文地址：https://blog.csdn.net/xiejunlan/article/details/139759683

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！