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 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 | 1x 1x 1x 1x 1x 1x 1x 2x 2x 2x 2x 1x 1x 1x | import React, { useState } from "react"; import { Table } from "@tencent/tea-component/lib/table"; import { Switch } from "@tencent/tea-component/lib/switch"; import { Form } from "@tencent/tea-component/lib/form"; import { RadioGroup, Radio } from "@tencent/tea-component/lib/radio"; import { StatusTip } from "@tencent/tea-component/lib/tips"; import { Segment } from "@tencent/tea-component/lib/segment"; const cvmList = [ { instanceId: "ins-4m99aio4", instanceName: "Hongkong VPN", status: "running", area: "香港一区", modal: "标准型 S1", publicIP: "119.28.142.24", privateIP: "10.144.77.75", desc: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", }, { instanceId: "ins-3e7y5ww3", instanceName: "Guangzhou Test", status: "stopped", area: "广州三区", modal: "标准型 S1", publicIP: "112.30.42.241", privateIP: "10.121.72.123", desc: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", }, ]; export default function TableExample() { const [bordered, setBordered] = useState(false); const [compact, setCompact] = useState(false); const [verticalTop, setVerticalTop] = useState(false); const [disableTextOverflow, setDisableTextOverflow] = useState(false); const [status, setStatus] = useState("none"); return ( <> <Form style={{ marginBottom: 32 }}> <Form.Item label="表格样式" align="middle"> <Segment value={String(bordered)} onChange={value => { if (value === "false") { setBordered(false); } else if (value === "true") { setBordered(true); } else { setBordered(value); } }} options={[ { text: "无边框", value: "false" }, { text: "外边框", value: "true" }, { text: "全边框", value: "all" }, ]} /> <i className="tea-divider tea-divider--space-2n" /> <Switch value={compact} onChange={value => setCompact(value)}> 紧凑样式 </Switch> <Switch value={verticalTop} onChange={value => setVerticalTop(value)}> 上对齐 </Switch> <Switch value={!disableTextOverflow} onChange={value => setDisableTextOverflow(!value)} > 自动省略 </Switch> </Form.Item> <Form.Item label="顶部提示"> <RadioGroup value={status} onChange={value => setStatus(value)}> <Radio name="none">无</Radio> <Radio name="loading">加载中</Radio> <Radio name="empty">空数据</Radio> <Radio name="found">找到数据</Radio> <Radio name="error">加载失败</Radio> </RadioGroup> </Form.Item> </Form> <Table compact={compact} bordered={bordered} verticalTop={verticalTop} disableTextOverflow={disableTextOverflow} records={status === "empty" ? [] : 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: "publicIP", header: "IP 地址", }, { key: "desc", header: "描述", align: "right", }, ]} topTip={ status !== "none" && ( <StatusTip // @ts-ignore status={status} onClear={() => setStatus("loading")} onRetry={() => setStatus("loading")} /> ) } /> </> ); } |