### 关于 `
el-pagination`
组件的插槽
使用
#### 插槽概述
`
el-pagination` 提供了多种类型的插槽来增强其灵活性，允许开发者自定义分页器中的特定部分。通过这些插槽，可以更精细地控制页面布局以及添加额外的功能。
#### 常见插槽及其应用实例
##### 默认插槽
(default slot
)
默认情况下可以直接放置一些补充性的 HTML 或者其他
组件到分页控件内部，通常用来增加说明文字或者其他交互元素：
```html
<template>
<div class="
pagination-container">
<
el-pagination layout="prev, pager, next" :total="100">
<!
-- 自定义内容
-->
<span style="margin
-left: 20px;">共 {{ total }} 条记录</span>
</
el-pagination>
</div>
</template>
<script>
export default {
data
() {
return { total: 100 };
}
};
</script>
```
##### prev 和 next 文本定制
如果希望改变前后翻页按钮上的文本，则可以通过相应位置的具名插槽来进行修改:
```html
<template>
<
el-pagination @size
-change="handleSizeChange" @current
-change="handleCurrentChange"
:current
-page
.sync="currentPage" :page
-size="pageSize" layout="prev, pager, next" :total="totalCount">
<span slot="prev">上一页</span> <!
-- 修改前一页的文字
-->
<span slot="next">下一页</span> <!
-- 修改后一页的文字
-->
</
el-pagination>
</template>
```
此处展示了如何利用具名插槽 `slot="prev"` 和 `slot="next"` 更改导航链接的内容[^2]。
##### size
-changer 定制每页条目数选择框
当配置有 `sizes` 属性时，还可以进一步美化或调整该区域的表现形式：
```html
<template>
<
el-pagination background layout="sizes, prev, pager, next" :total="1000">
<template v
-slot:sizes="{ pages }">
<s
elect v
-mod
el="value" @change="handleChange
($event
)">
<option v
-for="
(item,index
) in pages" :key="index">{{ item }}</option>
</s
elect>
</template>
</
el-pagination>
</template>
<script>
export default {
methods:{
handleChange
(event
){
console
.log
('S
elected:', event
.target
.value
);
}
},
}
</script>
```
此代码片段中，`v
-slot:sizes` 被用来替换原有的每页显示数量的选择列表为 `<s
elect>` 下拉菜单，并绑定了事件处理函数以便响应用户的输入变化[^3]。
扫一扫
638
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
