antd中实现隐藏某一列数据

在工作中我们可能会有这样需求，比如在课程管理中可能会存在相同名字的老师名字，这个时候如果再靠以前的查询数据后遍历数组是不可取的。这个时候我便可以利用教师编号唯一性的特点。
antd中每一列数据都有唯一性，那么我就需要根据自己的需求来改善代码。

1，先配置教师编号列，通过className设置样式将其隐藏

js代码：

       this.columns = [       
          
            {
                //任课教师id隐藏：通过classname
                title: '任课id',
                dataIndex: 'tNumber',
                width: '10%',
                className:"notshow",
                editable: true,
                align: 'center',               
            },
            {
            //显示时显示任课教师名字和编号（通过render方法中的record参数）
                title: '任课教师',
                dataIndex: 'tName',
                width: '10%',
                editable: true,
                align: 'center',
                render: (text,record) => {
                  console.log(record)
                return(<span>{text}({record.tNumber})</span>)
                }
            },       
            {
            //修改时将教师编号传过去
                title: '修改',
                align: 'center',
                dataIndex: 'operation',
                render: (text, record) => {
                    return (<Button type="primary" onClick={() => this.showModalUpdate(record.courseNum, record.tNumber)}>编辑</Button>)
                },
            },        
        ];

css代码：

.notshow{
    display: none;
}

结果图片如下：

2，编辑时将教师名字和编号一起展示便于用户更加直观区分相同名字的教师

编辑图片主要的代码如下：

 //教师信息
        async componentDidMount() {
            var courserIds = [];
            let res = await courseAddEcho({});
            if (res.code === 200) {
                res.data.map((item) => {
                    courserIds.push(item)
                })
                GradeInfo = courserIds.map(element =>
                    <Option value={element.tnumber} key={element.tnumber}> {element.tname}({element.tnumber})</Option>);
                //   success();
                console.log("courserIds",courserIds)
            }
        }
             render() {
            const { visible, onCancel, onCreate, form, info } = this.props;
            const { getFieldDecorator } = form;
            let token = sessionStorage.getItem("token");
            token = token.slice(1, -1);
            const props = {
                headers: {
                    token: token,
                },
            }
                  return (
                <Modal
                    visible={visible}
                    title="修改课程信息"
                    okText="提交"
                    cancelText="取消"
                    onCancel={onCancel}
                    onOk={onCreate}
                    destroyOnClose={true}
                ><Form>
                        //...其他信息
                        <Form.Item label="任课教师">
                            {getFieldDecorator('tnumber', {
                                rules: [{
                                    required: true, message: '请选择任课教师!',
                                    // pattern: new RegExp(/^[0-9]\d*$/, "g"),
                                }],
                                initialValue: info.tnumber
                            })(<Select>{GradeInfo}</Select>)}
                        </Form.Item>
                    </Form>
                </Modal >
            );
        }

显示结果如下所示：