Ant Design of React 之 Table 学习心得

Table使用

antd，即And·Design的简称。

antd中的Table组件是比较强大的，不过在实际项目中还是要自己手动处理一下，用起来效果更佳。写法如下示例：

表格组件定义

<Table
    size="middle"                   //表格大小: small/middle/large
    columns={columns}               //列定义
    dataSource={list}               //表格数据
    loading={loading}               //表格加载状态
    rowKey={record => record.id}    //主键设置
    rowSelection={rowSelection}     //表格选择定义：单选、多选
    pagination={false}              //分页设置
    scroll={scroll}                 //表格尺寸定义
/>

分页组件定义

const pageStyle = {
    marginTop : '16px', 
    textAlign: 'right', 
    display: (list && list.length > 0 ? 'block' : 'none' )
};

<div style={pageStyle}>
    <Pagination {...paginationProps}/>
</div>

表格列定义

const columns = [{
    title: '姓名',
    key: 'name',
    dataIndex: 'name',
    width: 150
},{
    title: '性别',
    key: 'sex',
    dataIndex: 'sex',
    width: 100
},{
    title: '年龄',
    key: 'age',
    dataIndex: 'age',
    width: 100
}];

//动态计算表格宽度
let tableWidth = 0;
columns.map(function(item){
    if(item.width){
        tableWidth += parseInt(item.width);
    }
});

PS：如果屏幕分辨率的宽度大于表格的宽度，则显示的时候会自动按 [列宽/表格宽度]百分比 等比例显示。

表格选择定义

//选择功能的配置
const rowSelection = {
    type : 'checkbox',      //多选/单选，checkbox or radio
    selectedRowKeys,        //指定选中项的key数组
    onChange: onTableSelectChange,
};

//选中项发生变化的时的回调
function onTableSelectChange(selectedKeys) {
    updateState({
        selectedRowKeys : selectedKeys
    });
}

分页组件配置

//分页大小发生改变
function onShowSizeChange(current, pageSize){
    updateState({
        pageSize
    });
    dispatch({
        type : 'models/query',
        payload : { 
            page : 1,           //页号
            AAAAA: formValues   //查询对象
        }
    });
}

//访问指定页
function onPaginationChange(current){
    dispatch({
        type: 'models/query',
        payload: {
            page: current,      //页号
            AAAAA: formValues   //查询对象
        }
    });
}

//显示分页信息
function showTotal(total, range){
    return `当前显示第${range[0]} ~ ${range[1]}条，总共${total}条记录`;
}

const paginationProps = {
    total,      //数据总数
    current,    //当前页号
    pageSize,   //分页大小
    showTotal,  //分页信息
    pageSizeOptions: ['10', '20', '50', '100'],     //分页大小选项
    showSizeChanger : true,
    showQuickJumper : true,
    onShowSizeChange,
    onChange: onPaginationChange
};