在 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 还在不断发展中,上述内容可能会随着版本的更新而有所变化。建议查阅最新的官方文档以获取最准确的信息。