react插件antd之table灵活应用

react引用antd

安装antd插件

npm install -D antd

按需引入（推荐），使用babel-plugin-import

下载对应插件

npm install -D babel-plugin-import

改配置文件

// .babelrc or babel-loader option
{
  "plugins": [
    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }] // `style: true` 会加载 less 文件
  ]
}

代码示例

// 引用table
import { Table} from 'antd';

// dom结构
render() { 
   return (
       <div style={{padding: '50px 100px'}}>
           <Table columns={columns} dataSource={data} onChange={() => this.onChange()} />
       </div>
   )
}

效果如图：

可能出现的问题：

1. 当标题或表格里面的内容过长的时候显示不下

在数据中添加render函数

{
    title: 'Address1',
    dataIndex: 'address1',
    render = (text, record, index) => {  // text为这条数据dataIndex填写对应的值  record为整条数据  index为第几条数据
        // mes为要展示的值，有了三元表达式来判断是否显示... 
        let mes = record.enginPower && record.enginPower.length > 12 ? record.enginPower.substring(0, 12) + '...' : record.enginPower;
        return <span title={record.lwh.length > 20 ? record.lwh : ''}>{mes}</span>;   // 设置title是为了，划上的时候，显示全部的值
    }
},

2. 对于一些奇怪的数据，表格不能自己对齐

在表头数据中，自己设置每一个宽度，并且最后一个不设置，留给插件自适应。如果设置了宽度还是不行，就改成%，加起来不要超过100%。

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    width: '30%'
  },
  {
    title: 'Age',
    dataIndex: 'age',
    width: '30%'
  },
  {
    title: 'Address',
    dataIndex: 'address',
  },
];

3. 加自定义操作列表

...
{
    title:  '操作',
    width: 200,
    dataIndex: 'operation',   // 此属性为数据里面对应的属性，在render函数里面会返回，可以根据此设置返回的文本
    align: 'center',
    // fixed: 'right',
    render: (text, record, index) => {
        return (<div className='btn_box_talbe'>
            <div className='btn_table'>
                <a >{'编辑查看'}</a>
            </div><div className='btn_table'>
                <a >{'作废'}</a>
            </div>
        </div>)
    }
}   
...

4. 排序

使用Table提供的sort属性，此处只讲服务端排序

<Table
    columns={columnsList}
    dataSource={listTable}
    placeholder=''
    rowKey={(e, i) => { return i }}
    // 排序 分页 分页切换的方法 三种都会调用此方法 
    onChange={(pagination, filters, sorter) => this.handleTableChange(pagination, filters, sorter)} 
    rowClassName={(record, index) => this.rowTable(record, index)}
    pagination={{
        showSizeChanger: true,
        showQuickJumper: false,
        defaultPageSize: 15,
        pageSizeOptions: ['15', '30', '45'],
        pageSize: pageSize,
        current: current,
        total: oldDataList.length,
        onShowSizeChange: (cur, page) => this.onShowSizeChange(cur, page),
        onChange: (cur, page) => this.changePage(cur, page),
        itemRender: (a, b, c) => this.itemRender(a, b, c)
    }}
/>
// 表格排序功能 服务端排序
handleTableChange(pagination, filters, sorter) {   
    // 在此判断 sorter的值 有值则为点击的排序
}

注意

在调用此方法的时候，要设置sortOrder和defaultSortOrder属性，不然在分页切换的时候sorter一直有值，

5. 表格横向滚动条和纵向滚动条设置

设置table的scroll属性

<Table
    columns={columnsList}
    dataSource={dataList}
    placeholder=''
    rowKey={(e, i) => { return i }}
    scroll={{ y: '3rem', x: (sum*3) + 'rem' }}   // 动态设置scroll 可以动态设置滚动条
    onRow={record => {
        return {
            onClick: () => this.rowClick(record)
        }
    }
    }
    pagination={{
        showSizeChanger: true,
        showQuickJumper: false,
        defaultPageSize: 20,
        pageSizeOptions: ['20', '30', '40'],
        pageSize: pageSize,
        current: current,
        total: dataList.length,
        onShowSizeChange: (cur, page) => this.onShowSizeChange(cur, page),
        onChange: (cur, page) => this.changePage(cur, page),
        itemRender: (a, b, c) => this.itemRender(a, b, c)
    }}
                                        />