Element |
您所在的位置：网站首页 › 随缘而处的意思 › Element |
Element
|
1、从element-ui官网复制分页代码到项目中，修改对应的分页参数为项目的真实数据，添加背景为蓝底白字样式。
export default {
data(){
return {
// 分页
page: {
page: 1,
size: 2,
totalCount: 20,
pageCount: 10,
},
}
}
}
生成的界面如下：
主要是修改属性：prev-text和next-text 生成的界面如下：
操作方法：在layout中添加 slot（插槽），配置对应插槽信息。 注意：一个分页组件只能实现一个插槽功能，layout中slot值要放在合适位置 有3个功能用了3个分页组件，第一个组件实现总条数，第二个实现首页，第三个实现了尾页功能。 ，共 {{ page.page }} / {{ page.pageCount }} 页 首页 尾页生成的界面如下：
上图的问题是分页组件换行了，可以自行设置样式来解决，也可参考下面的代码 4、添加首页，尾页，总页数，分页组件显示在一行，代码如下操作方法：在分页组件外层包裹一个div，设置它的样式 style="display: flex" ，共 {{ page.page }} / {{ page.pageCount }} 页 首页 尾页生成的界面如下：
|
【本文地址】