element的分页怎么改中文配置_ElementUI pagination分页 自定义配置

如何使用 ElementUI 自定义分页呢？

尽管ElementUI比较全面的提供了分页，但实际开发中的需求是多种多样的。比如我需要把下图中的下拉选择每页的数据条数，换成可以手动输入的形式，并且把他的位置放到前往xx页的左边位置。

实现代码如下：

class="pagination"

@size-change="sizeChangeHandle"

@current-change="currentChangeHandle"

background

:current-page="currentPage"

:page-sizes="[]"

:page-size="pageSize"

layout="total, prev, pager, next, slot, jumper"

:total="ipData.length">

条/页

// 改变每一页的数据条数

sizeChangeHandle (val) {

this.pageSize = val

},

// 改变当前所在页

currentChangeHandle (val) {

this.currentPage = val

},

// 监听pageSize文本框的变化，当pageSize为空时，设置pageSize的值为0，以防报错

handlePageSize () {

if (!this.pageSize) {

this.pageSize = 0

}

}

分析上述代码：

在 layout 属性用于控制分页器的排列位置，可以在合适的位置添加一个 slot ，然后在 el-pagination 标签中包裹标签，实现自定义分页内容。slot就代表着 el-pagination 内部自定义的标签。效果图如下：

一些小问题

自定义 el-input 标签中的 v-model 绑定 PageSize 时，要强制转换为数字类型，否则会报警告(应该是由于input文本框默认为text类型导致的)。代码为 v-model.number=‘pageSize‘

监听 pageSize 文本框变化函数 handlePageSize ，当 pageSize 为空时，设置 pageSize 的值为0，以防报错

涉及 elementUI 样式修改的部分可以参考这篇文章

原文：https://www.cnblogs.com/aurora-ql/p/13357989.html