element .el-pagination兼容移动端
时间: 2023-07-30 08:09:36 浏览: 86
`element .el-pagination` 默认样式在移动端会有一些显示问题,可以通过以下方式解决:
1. 使用 `element-ui` 提供的响应式工具类实现移动端样式适配。例如,可以在 `.el-pagination__sizes` 和 `.el-pagination__pager` 元素上添加 `el-hidden--xs-only` 类,使其只在移动端隐藏。
```html
<el-pagination
class="pagination"
:page-size="pageSize"
:total="total"
:current-page="currentPage"
layout="total, sizes, prev, pager, next, jumper"
>
<span slot="sizes" class="el-pagination__sizes el-hidden--xs-only">
每页显示:
<el-select v-model="pageSize" @change="handleSizeChange">
<el-option v-for="item in pageSizeOptions" :key="item" :label="item" :value="item"></el-option>
</el-select>
</span>
<span slot="pager" class="el-pagination__pager el-hidden--xs-only">
<el-button type="text" icon="arrow-left" @click="prevPage" :disabled="currentPage === 1"></el-button>
<el-button type="text" icon="arrow-right" @click="nextPage" :disabled="currentPage === pageCount"></el-button>
</span>
</el-pagination>
```
2. 自定义样式,对 `.el-pagination` 进行针对性的样式调整。例如,可以对 `.el-pagination__sizes` 和 `.el-pagination__pager` 元素设置 `display: none`,然后在移动端使用 media query 显示这些元素。
```html
<el-pagination
class="pagination"
:page-size="pageSize"
:total="total"
:current-page="currentPage"
layout="total, sizes, prev, pager, next, jumper"
>
<span slot="sizes" class="el-pagination__sizes">
每页显示:
<el-select v-model="pageSize" @change="handleSizeChange">
<el-option v-for="item in pageSizeOptions" :key="item" :label="item" :value="item"></el-option>
</el-select>
</span>
<span slot="pager" class="el-pagination__pager">
<el-button type="text" icon="arrow-left" @click="prevPage" :disabled="currentPage === 1"></el-button>
<el-button type="text" icon="arrow-right" @click="nextPage" :disabled="currentPage === pageCount"></el-button>
</span>
</el-pagination>
```
```css
/* 移动端样式 */
@media (max-width: 768px) {
.el-pagination__sizes,
.el-pagination__pager {
display: block;
}
}
/* 非移动端样式 */
@media (min-width: 769px) {
.el-pagination__sizes,
.el-pagination__pager {
display: none;
}
}
```