elementui的table的分页
时间: 2023-08-06 13:06:01 浏览: 46
ElementUI的Table组件提供了内置的分页功能。你可以通过设置`pagination`属性来启用分页功能。例如:
```html
<template>
<div>
<el-table :data="tableData" :pagination="pagination">
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="age" label="Age"></el-table-column>
<el-table-column prop="address" label="Address"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [...],
pagination: {
pageSize: 10, // 每页显示条数
total: 100 // 总条数
}
}
}
}
</script>
```
在这个例子中,`pagination`对象包含了两个属性:`pageSize`表示每页显示的条数,`total`表示总共有多少条数据。当`pagination`属性被设置为一个对象时,Table组件会自动启用分页功能,并且在底部显示分页器。你可以通过设置`pageSize`和`total`属性来控制分页的行为。
如果你想要监听分页器的事件,可以使用`@current-change`事件来监听当前页码的变化,使用`@size-change`事件来监听每页显示条数的变化。例如:
```html
<template>
<div>
<el-table :data="tableData" :pagination="pagination" @current-change="handleCurrentChange" @size-change="handleSizeChange">
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="age" label="Age"></el-table-column>
<el-table-column prop="address" label="Address"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [...],
pagination: {
pageSize: 10,
total: 100,
currentPage: 1 // 当前页码
}
}
},
methods: {
handleCurrentChange(currentPage) {
console.log('当前页码:', currentPage)
},
handleSizeChange(pageSize) {
console.log('每页显示条数:', pageSize)
}
}
}
</script>
```
在这个例子中,我们使用了`@current-change`事件来监听当前页码的变化,使用了`@size-change`事件来监听每页显示条数的变化。当分页器的状态发生变化时,这两个事件会被触发并传递相应的参数。你可以在事件处理函数中对这些参数进行处理。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)