rg-table

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});