Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 | 1x 1x 1x 2x 2x 2x 2x 1x 1x 1x 2x 1x | import React from "react"; import { Table } from "@tencent/tea-component/lib/table"; import { Justify } from "@tencent/tea-component/lib/justify"; import { Button } from "@tencent/tea-component/lib/button"; import { SearchBox } from "@tencent/tea-component/lib/searchbox"; import { Card } from "@tencent/tea-component/lib/card"; import { Layout } from "@tencent/tea-component/lib/layout"; import { Pagination } from "@tencent/tea-component/lib/pagination"; const { Body, Content } = Layout; const cvmList = [ { instanceId: "ins-4m99aio4", instanceName: "Hongkong VPN", status: "running", area: "香港一区", modal: "标准型 S1", publicIP: "119.28.142.24", privateIP: "10.144.77.75", }, { instanceId: "ins-3e7y5ww3", instanceName: "Guangzhou Test", status: "stopped", area: "广州三区", modal: "标准型 S1", publicIP: "112.30.42.241", privateIP: "10.121.72.123", }, ]; function TableLayoutExample() { return ( <Layout> <Body> <Content> <Content.Body> <Table.ActionPanel> <Justify left={ <> <Button type="primary">新建</Button> <Button>开机</Button> </> } right={ <> <SearchBox /> <Button icon="setting" /> <Button icon="refresh" /> <Button icon="download" /> </> } /> </Table.ActionPanel> <Card> <Table records={cvmList} recordKey="instanceId" rowDisabled={record => record.status === "stopped"} rowClassName={record => record.status} columns={[ { key: "instance", header: "ID/实例名", render: cvm => ( <> <p> <a>{cvm.instanceId}</a> </p> <p>{cvm.instanceName}</p> </> ), }, { key: "status", header: "状态", width: 100, render: cvm => { if (cvm.status === "running") { return <span style={{ color: "green" }}>运行中</span>; } Eif (cvm.status === "stopped") { return <span style={{ color: "red" }}>已关机</span>; } return cvm.status; }, }, { key: "area", header: "可用区域", }, { key: "modal", header: "主机型号", }, { key: "ip", header: "IP 地址", align: "right", render: cvm => ( <> <p>{cvm.publicIP} (公)</p> <p>{cvm.privateIP} (内)</p> </> ), }, ]} /> <Pagination recordCount={2} /> </Card> </Content.Body> </Content> </Body> </Layout> ); } export default function Demo() { return ( <section style={{ height: 320, border: "1px solid #ddd", }} > <TableLayoutExample /> </section> ); } |