rg-table

    1.0.1 • Public • Published

    rg-table

    基于regular的table组件,内部指定fetch进行数据请求,并且具备服务端分页、服务端搜索以及客户端全局搜索等功能,非常小巧和灵活。

    安装

    npm install --save-dev rg-table
    

    BTW: 完美运行rg-table的前提需要regularlodashfont-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});
    

    Keywords

    Install

    npm i rg-table

    DownloadsWeekly Downloads

    8

    Version

    1.0.1

    License

    MIT

    Last publish

    Collaborators

    • wangdong5