react antd table组件使用笔记

前端工作中选择了antd 的table组件，做一下笔记。

一、安装antd

使用 npm 或 yarn 安装

$ npm install antd --save

$ yarn add antd

二、引用

import { Table } from 'antd';

const { Column } = Table;

此次使用的是 JSX 风格的 API，

这个只是一个描述 columns 的语法糖，不能用其他组件去包裹 Column 和 ColumnGroup。

三、个人使用笔记

首先准备数据：

data=[
    {
        key: '14',
        serialNum: '3', //序号
    },
    ...
]

data数组中，一个元素为一行数据，元素中的属性为一行中需要用的的数据，要什么就放什么。

使用：

<Table
    rowKey={(record) => record.key}
    dataSource={this.state.data}
    size="middle"
    rowClassName={'table-bg-bg-version'}
    locale={{
         cancelSort: '点击取消排列',
         triggerAsc: '点击升序排列',
         triggerDesc: '点击降序排列'
    }}
    expandable={{
        // expandRowByClick: true, //是否支持点击行展开和收起
        expandedRowRender: record => <AccountInfo accountInfoClose={() => this.accountInfoClose()} />,
        // rowExpandable: record => record.key === this.state.actInfoKeys, //满足此条件，则允许展开
        expandedRowKeys: this.state.actInfoKeys,  //在此数组中的列展开，数组对象为data的key值
        }}
>

    <Column title="序号" dataIndex="serialNum" key="serialNum" className={'serialNum table-bg-bg-version'} 
        render={(text, record) => (
            <span onClick={(e) => {
                let showKey = [this.state.actInfoKeys[0] === record.key ? '' : record.key]
                this.setState({
                    actInfoKeys: showKey
                })
            }}>
                <span className={record.reps === 'user' ? 'font-color-green' : ''}>
                    {record.serialNum}
                </span>
            </span>
        )}
    />
    //以下省略
</Table>

dataSource: 数据源

size: 表格的大小，可取的值有：default | middle | small，可用此参数来控制表格的紧凑程度

rowClassName: 表格行的类名，由于API没有提供良好的样式自定义功能，可用此参数来写样式（less和sass都可以），重写表格样式

locale: 排序按钮的悬浮提示文本修改

expandable: 展开内容的相关配置，其中<AccountInfo />为展开的内容组件，此处组件按自己的需求来写即可。

    自定义点击展开方式：

    1.首先不使用行头的点击按钮，方法为 css 覆盖，在自己的样式文件中加上下面的 css 即可，会覆盖掉组件自带样式

.ant-table-row-expand-icon-cell {
  width: 0;
  border-right: 0 !important;
  display: none;
}

   2.用expandedRowKeys来控制展开和回收，actInfoKeys为数组，数组元素为每行数据的key值，key值在数组中的行展开expandedRowRender，不在则收回。

    用点击方法给actInfoKeys赋值即可实现展开和收回的功能，点击事件加在自己需要的地方。

<Column> 组件：一个组件为一列，render() 方法返回自定义的单元格内容，可自行添加点击事件，样式...

四、使用小技巧

当表格宽度不够撑满整个设备的宽时，给table设置：tableLayout="fixed" 即可

五、问题记录

1.点击排序时，出现会自动新增行，新增的为现有的数据

    解决方法：需要检查数据是否正确，比如某一行数据的key = ''