el-pagination 响应式布局该如何实现?具体代码
时间: 2023-10-02 20:03:42 浏览: 69
el-pagination 响应式布局可以通过设置不同屏幕尺寸下的显示数量来实现。具体代码如下:
```
<el-pagination
:total="total"
:page-size="pageSize"
:current-page="currentPage"
:layout="layout"
@current-change="handleCurrentChange"
/>
<script>
export default {
data() {
return {
total: 100,
pageSize: 10,
currentPage: 1,
layout: ['prev', 'pager', 'next', 'sizes', 'total', 'slot']
}
},
methods: {
handleCurrentChange(val) {
this.currentPage = val
}
},
mounted() {
if (window.innerWidth < 768) {
this.layout = ['prev', 'pager', 'next', 'total']
this.pageSize = 5
} else if (window.innerWidth < 992) {
this.layout = ['prev', 'pager', 'next', 'sizes', 'total']
this.pageSize = 10
} else {
this.layout = ['prev', 'pager', 'next', 'sizes', 'total', 'slot']
this.pageSize = 20
}
window.addEventListener('resize', () => {
if (window.innerWidth < 768) {
this.layout = ['prev', 'pager', 'next', 'total']
this.pageSize = 5
} else if (window.innerWidth < 992) {
this.layout = ['prev', 'pager', 'next', 'sizes', 'total']
this.pageSize = 10
} else {
this.layout = ['prev', 'pager', 'next', 'sizes', 'total', 'slot']
this.pageSize = 20
}
})
}
}
</script>
```
上述代码中,通过设置不同尺寸下的 `layout` 和 `pageSize`,实现了 el-pagination 响应式布局。在 `mounted()` 钩子函数中,通过监听窗口大小变化,不断更新 `layout` 和 `pageSize`。这样,当屏幕尺寸发生变化时,el-pagination 会动态地调整布局和显示数量。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)