@tongdun/react-ui-table NPM

描述

基于react，antd和react-ui-form的企业级中后台表格组件

Install

npm install @tongdun/react-ui-table

引用方式

import TdTable from '@tongdun/react-ui-table'

API

基础参数

参数	说明	类型	默认值
formConfig	查询头配置，参见react-ui-form	Array	-
formProps	其他react-ui-form参数	Object	-
handler	查询/翻页的回调函数	(params, pagination)=>{}	-
header	表格和查询体之间的内容	String\|ReactNode	-
pagination	分页器，参考配置项或pagination	Object	{current: 1,pageSize: 10}
tableProps	其他antd table配置	Object	-
rowKey	表格行 key 的取值，可以是字符串或一个函数	String\|Function(record):string	'key'
columns	同antd table columns,若有width属性，会自动做超长tooltip处理	Array	-
dataSource	数据数组	Array	-

实例

class CommonTable extends Component {
  constructor (props) {
    super(props)
    this.state = {
      pagination: {pageSize: 10, current: 2}, //分页对象
      dataSource: dataSource, //表格数据源
      genderSelect: genderSelect //性别下拉框
    }
  }

  detail (record) {
    console.log('查看事件',record)
  }

  handlerSubmit (params, pagination) {
    console.log(params, pagination, 'handleSubmit')
    //此处pagination需要手动更新！
    this.setState({
      pagination: pagination
    })
  }

  add () {
    console.log('新增',this.state.dataSource)
  }

  render () {
    const {genderSelect, dataSource, pagination} = this.state
    const columns = [
      {
        title: '姓名',
        dataIndex: 'name',
        key: 'name'
      }, {
        title: '年龄',
        dataIndex: 'age',
        key: 'age'
      }, {
        title: '地址',
        dataIndex: 'address',
        key: 'address',
        // 若有width属性，会自动做超长tooltip处理
        width: 100
      }, {
        title: '性别',
        dataIndex: 'gender',
        key: 'gender',
        render: (text, record) => {
          return <span>
            {record.gender === 'F' ? '女' : '男'}
          </span>
        }
      }, {
        title: '操作',
        key: 'opt',
        render: (text, record) => (
          <span>
                <a href='javascript:void(0)' style={{marginRight: 5}}
                   onClick={this.detail.bind(this, record)}>查看事件</a>
          </span>
        )
      }
    ]

    const formConfig = [{
      type: 'rangePicker',
      label: '出生日期',
      name: 'time',
      format: 'YYYY-MM-DD HH:mm:ss',
      keys: ['startTime', 'endTime'],
      initialValue: [moment().subtract(3, 'month'), moment()],
      item: <RangePicker showTime
                         format='YYYY-MM-DD HH:mm:ss'
                         ranges={{
                           ['30天']: [moment().subtract(30, 'days'), moment()]
                         }}/>
    }, {
      label: '性别',
      name: 'gender',
      item: <Select style={{width: 100}}>
        {
          Object.keys(genderSelect).map((item, index) => {
            return <Option key={index} value={item}>{genderSelect[item]}</Option>
          })
        }
      </Select>
    }, {
      label: '地址',
      name: 'address',
      item: <Input type='text'/>
    }, {
      type: 'button',
      items: [
        {
          active: 'Submit',
          value: '查询'
        },
        {
          active: 'Reset',
          value: '重置',
          props: {
            type: 'default'
          }
        }
      ]
    }
    ]
    const rowSelection = {
      onChange: (selectedRowKeys, selectedRows) => {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
      }
    }
    const header = <div style={{marginBottom: 20}}>
      <Button type={'primary'} icon={'plus'} onClick={this.add.bind(this)}>新增</Button>
    </div>
    return (
      <ReactUiTable
        columns={columns}
        dataSource={dataSource}
        formConfig={formConfig}
        pagination={pagination}
        rowKey={'id'}
        header={header}
        handler={this.handlerSubmit.bind(this)}
        tableProps={
          {rowSelection: rowSelection}
        }
        formProps={
          {style: {boxShadow: '0 4px 2px #ccc',margin:10}}
        }
      />
    )
  }
}

react-ui-table