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 1x 1x 1x 1x 1x 1x 32x 8x 8x 5x 8x 8x | import React, { useState } from "react"; import { Table } from "@tencent/tea-component/lib/table"; import { Icon } from "@tencent/tea-component/lib/icon"; const { sortable, filterable, scrollable, radioable, injectable, } = Table.addons; const records = [ { name: "Mario", age: 48, stage: "teenager", marriage: 0 }, { name: "Luigi", age: 38, stage: "youth", marriage: 0 }, { name: "Koopa", age: 28, stage: "youth", marriage: 1 }, { name: "Yoshi", age: 18, stage: "youth", marriage: 0 }, { name: "Link", age: 8, stage: "middle-aged", marriage: 2 }, { name: "Zelda", age: 58, stage: "middle-aged", marriage: 1 }, { name: "Wario", age: 68, stage: "elder", marriage: 3 }, { name: "Pikachu", age: 78, stage: "elder", marriage: 4 }, ]; const MARRIAGE_TEXT = ["未婚", "已婚", "离异", "再婚", "丧偶"]; const STAGE_TEXT = { teenager: "少年", youth: "青年", "middle-aged": "中年", elder: "老年", }; export default function TableAddonExample() { // 年龄段筛选值 const [stage, setStage] = useState("all"); // 婚姻状态筛选值 const [marriages, setMarrages] = useState([]); // 当前排序列 const [sorts, setSorts] = useState([]); // 当前选中行 const [selected, setSelected] = useState(null); let filteredRecords = records.slice(); // 根据年龄段筛选 Iif (stage !== "all") { filteredRecords = filteredRecords.filter(x => x.stage === stage); } // 根据混音状态 Iif (marriages.length > 0) { filteredRecords = filteredRecords.filter( record => marriages.indexOf(record.marriage) > -1 ); } // 如果要在前端排序,可以用 sortable.comparer 生成默认的排序方法 filteredRecords.sort(sortable.comparer(sorts)); return ( <Table records={filteredRecords} recordKey="name" rowDisabled={record => record.name === "张三"} columns={[ { key: "name", header: "姓名" }, { key: "age", header: "年龄" }, { key: "stage", header: "年龄段", render: x => STAGE_TEXT[x.stage], }, { key: "marriage", header: "婚姻状态", render: x => MARRIAGE_TEXT[x.marriage], }, ]} addons={[ // 支持表格滚动,高度超过 192 开始显示滚动条 scrollable({ maxHeight: 192, minWidth: 1600, onScrollBottom: () => console.log("到达底部"), }), // 对 age 列增加单选过滤支持 filterable({ type: "single", column: "stage", value: stage, onChange: value => setStage(value), // 增加 "全部" 选项 all: { value: "all", text: "全部", }, // 选项列表 options: [ { value: "teenager", text: "少年" }, { value: "youth", text: "青年" }, { value: "middle-aged", text: "中年" }, { value: "elder", text: "老年" }, ], }), // 对 marriage 列增加多选过滤支持 filterable({ type: "multiple", column: "marriage", value: marriages.map(x => String(x)), onChange: value => { setMarrages(value.filter(x => x !== "all").map(x => Number(x))); }, all: { value: "all", text: "全部", }, options: MARRIAGE_TEXT.map((text, index) => ({ value: index.toString(), text, })), }), // 支持表格排序 sortable({ // 这两列支持排序,其中 age 列优先倒序 columns: ["name", { key: "age", prefer: "desc" }], value: sorts, onChange: value => setSorts(value), }), // 支持表格单选 radioable({ value: selected, rowSelect: true, onChange: (value, context) => { console.log(value, context); setSelected(value); }, render: (element, { disabled }) => { return disabled ? <Icon type="loading" /> : element; }, }), // 支持 props 注入 injectable({ row: () => ({ onClick: () => console.log("Row Click"), }), }), ]} /> ); } |