yylib-quick-mobile/dist/yylib/table/YYTable.js

yylib-quick-mobile

import React, {Component} from 'react';
import Table from 'rc-table';
import classnames from 'classnames';
import './YYTable.css'
import 'rc-table/assets/index.css';
class YYTable extends React.Component {
  getColumns(children) {//界面设计器获取columns
    var columns = [];
    children.map((item,index)=>{
       let citem = Object.assign(
         {},
         item.props,
         {
           key:item.props.dataIndex,
           className:item.props.titleAlign?`yy-table-th-${item.props.titleAlign}`:''
         }
       );
       columns.push(citem);
    });
    return columns;
  }
  onRowClick(record, index) {//行点击事件
    if (this.props.onRowClick) {
      this.props.onRowClick(record,index);
    }
  }
  render() {
    let { data, columns, bordered, align, emptyText, scroll,children} = this.props;
    let wrapClz = classnames('yy-table',
      (bordered&&'yy-table-bordered'),
      (align==='center'&&'yy-table-align-center'),
      (align==='right'&&'yy-table-align-right'));
    scroll=scroll?scroll:{ x:(columns.length>3||children&&this.getColumns(children).length>3)?true:false };
    let devColumn = children&&this.getColumns(children).length>0?this.getColumns(children):[];
    return(
      <div className='yytable-block'>
        <Table
          scroll={scroll}
          className={wrapClz}
          columns={columns.length>0?columns:devColumn}
          data={data}
          emptyText={emptyText}
          onRow={(record, index) => ({
            onClick: this.onRowClick.bind(this, record, index)
          })}/>
      </div>
    );
  }
}
YYTable.defaultProps = {
  bordered:false,//是否展示外边框和列边框
  align:'left',//表格内容对齐方式
  emptyText:'暂无相关数据',
  data:[],//数据源
  columns:[],//列表项
}

export default YYTable;