0.1.2 • Published 4 years ago
ele-table-pagination v0.1.2
Element table pagination
Summary
- 基于 Element-UI 的 table 和 pagination 组件的二次封装
- Element-UI 版本 >= 2.13.0
- Vue 版本 >= 2.3.0
INSTALL
$ npm i --save ele-table-paginationAPI
属性
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| auto-load | 是否默认加载数据，若为 true 则调用 query-method 中的方法 | boolean | true,false | true |
| pagination-position | 分页栏布局位置 | string | left,center,right | center |
| loading-text | loading 动画的文本内容 | string | - | 正在加载中 |
| query-method | 必填，表格回调函数，回调函数需要返回一个 固定数据格式的 Promise 对象，tableData：表格数据，dataCount：数据总数 | function | - | async ({ currentPage, pageSize }) => { return { tableData: [], dataCount: 0 };} |
方法
| 方法名 | 说明 | 参数 |
|---|---|---|
| refreshQueryMethod | 调用query-method 中指定的回调函数 | - |
- 支持 Element-UI Table 组件除 data 外的全部属性和全部事件及方法，详情请查阅 Element-UI Table 文档
- 支持 Element-UI Pagination 组件除 total 外的全部属性和全部事件，详情请查阅 Element-UI Pagination 文档
备注
- 当 currentPage 属性或 pageSize 属性发生变化时，会自动调用 query-method 中的回调函数。
- 当 pageSize 属性发生变化时，currentPage 属性会重置为 1，即自动跳转到第一页。
Quick Start
在 main.js 中配置：
import Vue from 'vue'
import EleTablePagination from 'ele-table-pagination'
Vue.use(EleTablePagination)在项目中使用：
<template>
<ele-table-pagination
:query-method="queryMethod"
:auto-load="false"
ref="table">
<el-table-column prop="foo" label="fooLable"></el-table-column>
<el-table-column prop="bar" label="barLabel"></el-table-column>
</ele-table-pagination>
</template>
<script>
export default {
methods: {
// 必填的 queryMethod,返回 promise 对象
// 回调参数 { currentPage, pageSize }
async queryMethod({ currentPage, pageSize }) {
// requests or something handle ...
return {
tableData: [
{
foo: "foo1",
bar: "bar1"
},
{
foo: "foo2",
bar: "bar2"
}
],
dataCount: 10
};
},
refreshTable() {
this.refs.table.refreshQueryMethod();
}
}
};
</script>