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