动态获取查询条件和table展示区字段 typeScript

背景：
动态获取菜单栏信息，每个item对应不同的formCode。formCode改变时，请求接口获得动态查询条件。以下图为例，点击考勤-请假Item后，请求得到的搜索项为“归档日期”、“单选项”。【查询】后，得到table的表头和table数据。

搜索区动态搜索条件的数据结构：

对应代码实现：

{/* 动态搜索条件 */}
            <Row gutter={24}>
              {dynamicDomData &&
                dynamicDomData.map((item, index) => {
                  return (
                    <Col span={12} key={index}>
                      <FormItem label={item.name}>
                        {getFieldDecorator(`${item.selectType}`)(
                          <Select mode="multiple" placeholder="请选择" onChange={value => this.dynamicSelectChange(value, item.selectType)}>
                            {item.value &&
                              item.value.map((option: TselectTypeItemDTO) => {
                                return (
                                  <Option key={option.key} value={option.key}>
                                    {option.name}
                                  </Option>
                                );
                              })}
                          </Select>,
                        )}
                      </FormItem>
                    </Col>
                  );
                })}
            </Row>

关于动态查询条件取值的获取
1.获取到动态搜素条件字段后，将data拼装成对象数组[{
key:select框取值,
selectType:字段名,
}]

table数据展示区
服务端会给出table 表头字段和数据栏。其数据结构为：
table表头数据

数据处理：

 getColumns = (tableHead: TtableHead[]) => {
    const testColumns: ColumnProps<Array<any>>[] = tableHead.map((item, index) => {
      return {
        title: item.headName,
        dataIndex: item.orderFile,
        // 倒序 降序 1: 升序
        sorter: !item.orderFile ? false : true,
        // render: (_: any, record: Array<any>) => record[index],
        render: (_: any, record: Array<any>) => <span className='width-limit' title={record[index]}>{record[index]}</span>,
      };
    });
    this.setState({
      columns: testColumns,
    });
  };

数据展示部分：

接口将每行要展示的所有数据放在了一个数组中。table表格要展示的数据存放在一个二维数组中。其数据展示逻辑为：