elementui分页插件手动输入页数
时间: 2023-10-30 11:09:37 浏览: 218
72pager 就是那个分页的插件
可以通过修改当前页数来实现手动输入页数的效果。具体实现方法如下:
1. 在模板中添加一个输入框和一个按钮,用于输入页数和触发跳转操作。
```html
<el-input v-model="currentPage" style="width: 80px"></el-input>
<el-button type="primary" @click="handleCurrentChange(currentPage)">跳转</el-button>
```
2. 在组件中添加一个 `currentPage` 变量,用于绑定输入框的值,并在跳转操作中使用该变量更新当前页数。
```javascript
data() {
return {
currentPage: 1,
// ...
}
},
methods: {
handleCurrentChange(val) {
this.$refs.table.setCurrentPage(val);
},
// ...
}
```
3. 在表格组件中添加一个 `ref` 属性,用于获取表格实例,并在跳转操作中使用该实例的 `setCurrentPage` 方法更新当前页数。
```html
<el-table ref="table" :data="tableData" :pagination="pagination"></el-table>
```
阅读全文