lujing-fe-react-table

组件功能

基础常规列表

组件部署

cnpm i lujing-fe-react-table --save

组件用法（demo）

import LTable from 'lujing-fe-react-table';
import 'antd/lib/table/style/css';
  

class T extends React.Component {
  state={
    filters:{},// 根据变动刷新
  };
  render() {
    const caseChangeDataTableProps = {
      scroll: { x: 768 }, // 小屏幕时，横滚长度
      resetCurrent: 1, // 默认重置页码
      fetch: {
        // 请求对象
        url: 'https://sitetest.tf56.com/restStageApi/rsWechat/signature/getSignature',
        method: 'get',
        fetchType: 'jsonp',
        dataKey: 'data', // 请求时，置入dataSource的数据的key
        dataFun: (data) => {
          data.data = [data.data];
          for (let i = 0; i < 40; i++) {
            data.data.push({ timestamp: i });
          }
          return data;
        },
        data:{
          ...filters
        }
        req: (pramas) => {// 可以直接把promise对象传进去
          return request({
            url: 'https://sitetest.tf56.com/restStageApi/rsWechat/signature/getSignature',
            data: {
              ...filters,
              ...pramas,
            },
            fetchType: 'jsonp',
          });
        },
      },
      columns: [
        { title: '车牌号', dataIndex: 'timestamp' },
        { title: '运行时长', dataIndex: 'runtime' },
        { title: '行驶里程 (KM)', dataIndex: 'totalstance' },
        {
          title: '操作',
          render: (text, record) => (
            <span>
              <a onClick={() => this.detail(record)}>详情</a><span style={{ padding: '0px 8px' }}>|</span>
              <a onClick={() => this.deleteItem(record.routeLineId)}>删除</a>
            </span>
          ),
        },
      ],
      rowKey: 'vehicleNum', // 数据主键，值不能有重复
    };
    return (
      <div>
        <LTable {...caseChangeDataTableProps} />
      </div>);
  }
}

antd3.0 样式需要单独引入

详见demo

更新log

1.0.3 antd3.0用法 1.0.4 fetch增加promise请求用法 req参数

author

@hanangjie