rg-table
基于regular的table组件,内部指定fetch进行数据请求,并且具备服务端分页、服务端搜索以及客户端全局搜索等功能,非常小巧和灵活。
安装
npm install --save-dev rg-table
BTW: 完美运行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});