element ui分页怎么绑定数据
时间: 2023-10-16 10:31:57 浏览: 37
在使用 Element UI 分页组件时,需要先定义一个数据列表,然后将其绑定到分页组件上,具体操作如下:
1. 定义数据列表:
```javascript
data() {
return {
tableData: [
{ id: 1, name: '张三', age: 20 },
{ id: 2, name: '李四', age: 25 },
{ id: 3, name: '王五', age: 30 },
{ id: 4, name: '赵六', age: 35 },
{ id: 5, name: '钱七', age: 40 }
]
}
}
```
2. 在模板中使用分页组件,并绑定数据列表:
```html
<el-pagination
:current-page="currentPage"
:page-size="pageSize"
:total="tableData.length"
@current-change="handleCurrentChange">
</el-pagination>
<el-table :data="tableData">
<!-- 表格列定义 -->
</el-table>
```
其中,`currentPage` 和 `pageSize` 是当前页码和每页显示条数的绑定值,`tableData.length` 是数据总条数,`handleCurrentChange` 是页码变化时的回调函数。
3. 在回调函数中根据当前页码和每页显示条数对数据进行分页:
```javascript
methods: {
handleCurrentChange(newPage) {
this.currentPage = newPage;
}
},
computed: {
currentPageData() {
const start = (this.currentPage - 1) * this.pageSize;
const end = start + this.pageSize;
return this.tableData.slice(start, end);
}
}
```
在 `handleCurrentChange` 方法中,将当前页码赋值给 `currentPage`,在 `computed` 中定义一个计算属性 `currentPageData`,根据当前页码和每页显示条数对数据进行分页,并返回当前页的数据列表。
4. 在表格中使用分页后的数据列表:
```html
<el-table :data="currentPageData">
<!-- 表格列定义 -->
</el-table>
```
这样就完成了 Element UI 分页组件的数据绑定。