1.0.1 • Published 7 years ago
rg-table v1.0.1
rg-table
基于regular的table组件,内部指定fetch进行数据请求,并且具备服务端分页、服务端搜索以及客户端全局搜索等功能,非常小巧和灵活。
安装
npm install --save-dev rg-tableBTW: 完美运行rg-table的前提需要regular、lodash、font-awesome,apm-ui等环境支持。
Example
安装运行
npm install # 安装依赖
puer -a ./example/mock/data.js # mock和静态服务器,前提安装有puer数据测试:
http://localhost:8000/api/blogs?limit=20&offset=0页面访问:http://localhost:8000/example/index.html
API
Options
| 参数 | 类型 | 默认值 | 数据流向 | 描述 |
|---|---|---|---|---|
| service | function | outer => inner | fetch服务,用于异步请求数据 | |
| option | object | outer => inner | 请求url、分页参数、扩展参数 | |
| option.limit | number | 10 | outer => inner | 分页limit |
| option.offset | number | 0 | outer => inner | 分页offset |
| option.url | string | outer => inner | 请求url | |
| option.{extends} | string | outer => inner | 扩展参数 | |
| headers | object | outer => inner | 列表头信息 | |
| headers.title | string | outer => inner | 列表显示标题 | |
| headers.name | string | outer => inner | 列表名称 |
示例:
this.data.service = fetchService;
this.data.option = {
limit: 10,
offset: 0,
url: '/api/blogs'
};
this.data.header = [{
title: "编号",
name: "id"
}, {
title: '主题',
name: 'title'
}, {
title: "时间",
name: "time"
}];Methods
| 方法名称 | 参数 | 描述 |
|---|---|---|
| refresh | 重置当前页,重新获取当前页数据 | |
| search | object,例如{title:xx} | 服务器端请求搜索 |
示例:
this.$refs.list.search({title: this.data.title});