element 表格分页
ElementUI中的表格分页可以通过`el-pagination`组件来实现。具体步骤如下：
1. 用`<el-pagination>`标签包裹表格组件。
```html。
<el-pagination。
:page-sizes="[10, 20, 30, 50]"。
:page-size.sync="pageSize"。
:current-page.sync="currentPage"。
:total="total">。
</el-pagination>。
```。
其中，`size-change`和`current-change`事件分别对应每次改变每页数量和当前页面时调用的方法，`page-sizes`为页面大小选择器的选项列表，`:page-size.sync`表示每页数量，`:current-page.sync`表示当前页面，`:total`表示总数据数。
2.编写表格数据渲染方法和页码/每页数量改变回调方法。
```javascript。
data() 。
return 。
tableData: [], // 存储表格数据。
currentPage: 1, // 当前页码。
pageSize: 10, // 每页数量。
total: 0 // 数据总数。
};。
},。
methods: 。
fetchData() { // 模拟获取数据。
//这里可以调用接口获取数据。
const start = (this.currentPage - 1) * this.pageSize; // 计算数据的起始位置。
const end = start + this.pageSize - 1; // 计算数据的结束位置。
//这里假设有100条数据，初次加载或每次页码/每页数量改变时进行数据切片。
this.tableData = data.slice(start, end);。
al = data.length;。
element表格横向滚动条
},。
handleSizeChange(val) { // 每页数量改变回调。
this.pageSize = val;。
this.fetchData();。
},。
handleCurrentChange(val) { // 页码改变回调。
this.currentPage = val;。
this.fetchData();。
}。
}。
```。
其中，`fetchData()`方法用于获取数据，这里我们假设数据已经存在数组`data`中，并且初始加载时需要显示前10条数据。在每次页码/每页数量改变时，我们需要根据当前选项重新计算起始位置和结束位置，并根据这个位置切片数据。最后，我们还需要计算总的数据数量并更新`total`值。
3.在表格组件中调用渲染方法。
```html。
<el-table :data="tableData">。
。
</el-table>。
```。
在组件中，我们可以直接使用`tableData`来显示表格数据。在初次加载时，我们需要调用`fetchData()`方法来获取数据。
完整的实现代码如下所示：
```html。
<template>。
<div>。
<el-table :data="tableData">。
。
</el-table>。
<el-pagination。
:page-sizes="[10, 20, 30, 50]"。
:page-size.sync="pageSize"。
:current-page.sync="currentPage"。
:total="total">。
</el-pagination>。
</div>。
</template>。
<script>。
const data = []; // 存储表格数据。
for (let i = 1; i <= 100; i++) 。
data.push(。
id: i,。
name: `User ${i}`,。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。