react antd Table实现动态控制列的显示隐藏

我爱模板网在用react antd Table表格做列表时，由于列表的字段太多，客户提出要能控制列表字段的显示隐藏。我爱模板网在之前分享过ElementUI表格动态显示列。这次自己研究了下，实现了react antd的列显示隐藏方法，这里分享下（可能有更简便的方法，但由于任务繁重，就没仔细研究了）。先看下下面的效果：


由于table列表是放在ListTable.jsx组件中的，而这个控制显示隐藏的按钮是放在index.jsx中的，要带过去。所以：

一、index.jsx文件：

1、定义要显示的列表数据：

const initialColumn = [
    {name: '订单号', checked: true, value: 0},{name: '姓名', checked: true, value: 1},
    {name: '来源', checked: true, value: 2},{name: '订单类型', checked: true, value: 3},
    {name: '订单原价', checked: true, value: 4},{name: '实付金额', checked: true, value: 5},
    {name: '客户经理', checked: true, value: 6},{name: '售前客服', checked: true, value: 7},
    {name: '产品类型', checked: true, value: 8},{name: '产品名称', checked: true, value: 9},
    {name: '产品版本', checked: true, value: 10},{name: '支付时间', checked: true, value: 11},
    {name: '开通时间', checked: true, value: 12},{name: '到期时间', checked: true, value: 13},
    {name: '订单状态', checked: true, value: 14},{name: '退款金额', checked: true, value: 15},
    {name: '退款原因', checked: true, value: 16},{name: '关联订单', checked: true, value: 17}
];

2、定义state，初始值就是上面定义的值：

const [showColumn, setShowColumn] = useState(initialColumn);

3、定义控制显示隐藏的方法：

function handelShowColumn(checkedValues) {
    let res = initialColumn;
    res.forEach(item => {
        item.checked = checkedValues.includes(item.value);
    });
    setShowColumn([...res]);
}

4、定义下拉菜单，循环显示出checkbox，这里的defaultValue控制了默认勾选哪些列：

const pupupContent = (
    <div>
        <Checkbox.Group
            defaultValue={[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17]}
            style={{ width: '100%' }}
            onChange={handelShowColumn}
        >
        {
            showColumn.map(item => (
                <Row key={item.value} style={{ marginBottom: '5px' }}>
                    <Col span={24}>
                        <Checkbox value={item.value}>{item.name}</Checkbox>
                    </Col>
                </Row>
            ))
        }
        </Checkbox.Group>
    </div>
);

<Popover placement="bottom" content={pupupContent} trigger="click">
    <Button style={{marginRight: '10px'}} icon={<UnorderedListOutlined />}>字段筛选</Button>
</Popover>

5、给列表组件传递要显示列的参数，其他参数和方法省略不提：

<ListTable
    loading={loading}
    // 将要显示的列传过去
    showColumn={showColumn}
    // ...
/>

二、ListTable.jsx文件

给每一项添加控制显示隐藏的条件即可：

const tableColumns = filterRoleForExcludes([
      // 注意，这里就是通过传递过来的showColumn，来控制当前列的显示隐藏
    props.showColumn[0].checked ? {
      title: '订单号',
      dataIndex: 'orderCode',
      key: 'orderCode',
      fixed: 'left',
      width: 200,
      render(text,record){
        return(
          <RolePower type="order_manage_detail" replace={text}>
            <a onClick={()=>setCurrent(record)}>{text}</a>
          </RolePower>
        );
      }
    } : null,
    // 更多列...
]);

<Table
    className="table"
    columns={tableColumns}
    rowKey={record => record.id}
    dataSource={props.dataSource.data}
    locale={{ emptyText: <NoData text='' /> }}
    scroll={{x: 2000}}
    pagination={{
      current: props.currentPage,
      showSizeChanger: true,
      showQuickJumper: true,
      defaultCurrent: 1,
      defaultPageSize: 10,
      total: props.dataSource.total,
      onChange: props.onPageChange,
      onShowSizeChange: props.onShowSizeChange,
      showTotal: (total) => ` 共${total}条`
    }}
    rowSelection={includesAuthority(['order_manage_follow_change']) && {...rowSelection}}
/>

至此大功告成，肯定有更简便的方法，但是时间比较紧，就没优化了。

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！