请问如何使用使用Ant design写一个类似表格功能的纵向的两列的描述列表组件？

Question

就是一列是标题一列是内容，怎样实现column和DataSource一一对应的功能呢,类似下图这种

使用时可以使用 <组件名 DataSource={} column={}> 这样的方式

Answer 1

Descriptions 描述列表

antd自带的Descriptions组件就是你所描述的功能。

Answer 2

可以使用antd的Table组件实现

传入columns和dataSource(Array)

出现的问题：

antd中的Table是横向的，如何纵向呢？

解决方法：flex布局

// 设置table的flex横向
table{
    display:flex;
}
// 设置tr的flex纵向
tr{
    display:flex;
    flex-direction:column;
}

举个栗子：

TableColumn.tsx

import React from 'react';
import {Table} from 'antd';
import type {TableProps} from 'antd';


import './index.less';

const TableColumn:React.FC<TableProps<{}>> = (props) => {
  const {className} = props;
  return (
    <Table {...props} className={`${className} table-column`}  />
  )
}

export default TableColumn;

引入的less样式

.table-column{
  table{
    display:flex !important;
  }
  tr{
    display: flex !important;
    flex-direction: column !important;
  }
}

使用：

import ReactDOM from 'react-dom';
import TableColumn from '@/components/TableColumn';

const App = () => {
    const columns = [];
    const dataSource = [];
    return (
        <TableColumn columns={columns} dataSource={dataSource} rowKey="key"/>
    )
}

ReactDOM.hydrate(<App />,document.querySelector('#app'))