element ui——Pagination 自定义total模板
时间: 2023-10-18 14:50:06 浏览: 59
在 Element UI 的 Pagination 组件中,你可以通过 `slot-scope` 属性来自定义 total 模板。下面是一个示例代码:
```html
<template>
<div>
<el-pagination
:page-sizes="[10, 20, 30, 40]"
:page-size="pageSize"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
layout="total, sizes, prev, pager, next, jumper"
:pager-count="5"
>
<span slot="total" class="custom-total">{{ totalText }}</span>
</el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
pageSize: 10,
total: 100,
};
},
computed: {
totalText() {
return `共 ${this.total} 条数据`;
},
},
methods: {
handleSizeChange(size) {
this.pageSize = size;
},
handleCurrentChange(page) {
// 处理页码改变事件
},
},
};
</script>
<style>
.custom-total {
margin-right: 10px;
}
</style>
```
在上面的代码中,我们使用了 `slot-scope` 属性来自定义 total 模板。通过设置 `slot="total"`,我们可以将自定义的模板放置在 Pagination 组件中。在这个示例中,我们使用了一个计算属性 `totalText` 来生成自定义的 total 文本,并使用 `class="custom-total"` 来添加一些样式。
你可以根据自己的需求修改模板的样式和内容。希望这个示例能帮助到你!
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)