Ant Design Table: Displaying applicationInfos Array
To display the `applicationInfos` array in a table, you can use the `Table` component from the antd library. Here's an example of how you can achieve this:\n\n1. Import the necessary components and libraries:\n\njsx\nimport { Table } from 'antd';\n\n\n2. Define the columns for the table:\n\njsx\nconst columns = [\n {\n title: 'Deploy Order',\n dataIndex: 'deployOrder',\n key: 'deployOrder',\n },\n {\n title: 'Image ID',\n dataIndex: 'imageId',\n key: 'imageId',\n },\n {\n title: 'App ID',\n dataIndex: 'appId',\n key: 'appId',\n },\n {\n title: 'Deploy Status',\n dataIndex: 'deployStatus',\n key: 'deployStatus',\n },\n];\n\n\n3. Extract the `applicationInfos` array from the provided data:\n\njsx\nconst data = [{"largeVersionId":"id001","env":"test","projectId":"INTELLIGENTMAINTENANCE","largeVersionDeployConfigVO":{"env":"test","largeVersionId":"id001","projectId":"INTELLIGENTMAINTENANCE","projectName":"测试项目001","applicationInfos":[{"deployOrder":null,"imageId":"ceshi-web:vcccb0d4-20230531175455","appId":"ceshi-web-002","deployStatus":0}],"dbConfigInfos":[{"id":"64ae4d31b6e725707a669184","instanceName":"instance-001","dbName":"ai-develop","sql":"insert into dataset values(1,1,'testname','http://www.baidu.com','123456','master','Y')","execStatus":0,"execOrder":"1"},{"id":null,"instanceName":"ali-leiniao-hangzhou-basic-test-mysql","dbName":null,"sql":"-- 请在此输入SQL,以分号结尾,仅支持DML和DDL语句,查询语句请使用SQL查询功能。\r\ninsert into\r\n dataset\r\nvalues(\r\n 1,\r\n 1,\r\n 'testname',\r\n "type",\r\n 'http://www.baidu.com',\r\n '123456',\r\n 'master',\r\n 'Y'\r\n );","execStatus":0,"execOrder":"1"}],"nacosConfigInfos":null,"deployOrder":2}}];\n\nconst applicationInfos = data[0]?.largeVersionDeployConfigVO?.applicationInfos || [];\n\n\n4. Render the table component with the extracted `applicationInfos` data:\n\njsx\n<Table\n rowKey={'id'}\n columns={columns}\n dataSource={applicationInfos}\n pagination={false}\n rowSelection={{\n selectedRowKeys,\n onChange: handleSelect,\n }}\n/>\n\n\nThis will display the `applicationInfos` array in a table with the specified columns.
原文地址: https://www.cveoy.top/t/topic/pKon 著作权归作者所有。请勿转载和采集!