时间戳

首页 > 解决方案 > 蚂蚁设计获取列索引

reactjs - 蚂蚁设计获取列索引

问题描述

我正在使用Ant Design构建一个组件，该组件的使用方式如下：

                <Table
                    style={{cursor: 'pointer'}}
                    components={components}
                    rowClassName={() => 'editable-row'}
                    bordered
                    dataSource={dataSource}
                    columns={columns}
                    pagination={{ hideOnSinglePage: true }}
                    onSelect={(column) => { console.log(column) }}
                    onRow={(record, rowIndex) => {
                        return {
                            onClick: event => {
                                var updated = { ...this.state }
                                updated.modals.days.isVisible = true;
                                updated.selectedRowIndex = rowIndex;
                                this.setState(updated)
                            },
                        };
                    }}
                    renderCell={() => {

                    }}
                />

当您单击一个单元格时，它应该启动一个模式（基于我单击的列）。单击时如何获取列索引（或名称）？或其他方式来实现这一点。

标签： reactjsantd

解决方案

您可以通过将ColumnType对象数组传递给<Table>.

ColumnType有一个属性render，您可以在其中放置您的逻辑（使用 html），您将在此列中获得记录的值。正如文档中所说：返回值应该是 ReactNode，或者 colSpan/rowSpan 配置的对象。

您可以在可编辑单元格的文档中调整删除弹出确认中的部分

const columns: ColumnsType<YourRecord> = [
  {
    key: 'name',
    title: 'Name',
    dataIndex: 'name',
  },
  {
    key: 'age',
    title: 'Age',
    dataIndex: 'age',
  },
  {
    key: 'modal',
    title: 'Modal',
    dataIndex: 'modal',
    render: (_: any, record: YourRecord) => {
      return <>html with onClick to open modal</>
    }
  }
];


<Table
                style={{cursor: 'pointer'}}
                components={components}
                rowClassName={() => 'editable-row'}
                bordered
                dataSource={dataSource}
                columns={columns}
                pagination={{ hideOnSinglePage: true }}
                onSelect={(column) => { console.log(column) }}
                onRow={(record, rowIndex) => {
                    return {
                        onClick: event => {
                            var updated = { ...this.state }
                            updated.modals.days.isVisible = true;
                            updated.selectedRowIndex = rowIndex;
                            this.setState(updated)
                        },
                    };
                }}
                renderCell={() => {

                }}
            />

推荐阅读