elementui中el-pagination文字自定义
在Element UI中,el-pagination
组件的文本可以通过slot进行自定义。以下是一个自定义el-pagination
分页文本的例子:
<template>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
:total="400">
<template #prev>
<i class="el-icon el-icon-arrow-left"></i>
</template>
<template #next>
<i class="el-icon el-icon-arrow-right"></i>
</template>
</el-pagination>
</template>
<script>
export default {
data() {
return {
currentPage: 1
};
},
methods: {
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
},
}
};
</script>
在这个例子中,我们使用了#prev
和#next
slot来自定义分页按钮的图标。你也可以通过类似的方式自定义显示总条目数、页面尺寸等文本内容。记住,slot名称对应的是组件的默认插槽,你可以通过这些插槽插入任何自定义的Vue组件或者HTML元素。
评论已关闭