Table 表格
用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。
基础表格
基础的表格展示用法。
当 el-table 元素中注入 data 对象数组后，在 el-table-column 中用 prop 属性来对应对象中的键名即可填入数据，用 label 属性来定义表格的列名。可以使用 width 属性来定义列宽。
export function TableBasic() { return ( <ElTable data={tableData} style={fullWidth}> <ElTableColumn prop="date" label="Date" width="180" /> <ElTableColumn prop="name" label="Name" width="180" /> <ElTableColumn prop="address" label="Address" /> </ElTable> );}
带斑马纹表格
使用带斑马纹的表格，可以更容易区分出不同行的数据。
stripe 可以创建带斑马纹的表格。如果 true, 表格将会带有斑马纹。
export function TableStriped() { return ( <ElTable data={tableData} stripe style={fullWidth}> <ElTableColumn prop="date" label="Date" width="180" /> <ElTableColumn prop="name" label="Name" width="180" /> <ElTableColumn prop="address" label="Address" /> </ElTable> );}
带边框表格
默认情况下，Table 组件是不具有竖直方向的边框的，如果需要，可以使用 border 属性，把该属性设置为 true 即可启用。
export function TableBorder() { return ( <ElTable data={tableData} border style={fullWidth}> <ElTableColumn prop="date" label="Date" width="180" /> <ElTableColumn prop="name" label="Name" width="180" /> <ElTableColumn prop="address" label="Address" /> </ElTable> );}
带状态表格
可将表格内容 highlight 显示，方便区分「成功、信息、警告、危险」等内容。
可以通过指定 Table 组件的 row-class-name 属性来为 Table 中的某一行添加 class，这样就可以自定义每一行的样式了。
export function TableWithStatus() { const warningRow: CSSProperties = { "--el-table-tr-bg-color": "var(--el-color-warning-light-9)", } as CSSProperties; const successRow: CSSProperties = { "--el-table-tr-bg-color": "var(--el-color-success-light-9)", } as CSSProperties; return ( <ElTable data={tableData} style={fullWidth} rowStyle={({ rowIndex }) => rowIndex === 1 ? warningRow : rowIndex === 3 ? successRow : {} } > <ElTableColumn prop="date" label="Date" width="180" /> <ElTableColumn prop="name" label="Name" width="180" /> <ElTableColumn prop="address" label="Address" /> </ElTable> );}
显示溢出工具提示的表格
当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。
属性 show-overflow-tooltip 接受一个布尔值。为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
export function TableOverflowTooltip() { return ( <ElTable data={overflowData} style={fullWidth}> <ElTableColumn type="selection" width="55" /> <ElTableColumn label="Date" width="120"> {({ row }) => <span>{(row as User).date}</span>} </ElTableColumn> <ElTableColumn prop="name" label="Name" width="120" /> <ElTableColumn prop="address" label="use show-overflow-tooltip" width="240" showOverflowTooltip /> <ElTableColumn prop="address" label="address" /> </ElTable> );}
固定表头
纵向内容过多时，可选择固定表头。
只要在 el-table 元素中定义了 height 属性，即可实现固定表头的表格，而不需要额外的代码。
export function TableFixedHeader() { return ( <ElTable data={wideTableData} height="250" style={fullWidth}> <ElTableColumn prop="date" label="Date" width="180" /> <ElTableColumn prop="name" label="Name" width="180" /> <ElTableColumn prop="address" label="Address" /> </ElTable> );}
固定列
横向内容过多时，可选择固定列。
固定列需要使用 fixed 属性，它接受 Boolean 值。如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
export function TableFixedColumn() { return ( <ElTable data={tableData} style={fullWidth}> <ElTableColumn fixed prop="date" label="Date" width="150" /> <ElTableColumn prop="name" label="Name" width="120" /> <ElTableColumn prop="state" label="State" width="120" /> <ElTableColumn prop="city" label="City" width="120" /> <ElTableColumn prop="address" label="Address" width="600" /> <ElTableColumn prop="zip" label="Zip" width="120" /> <ElTableColumn fixed="right" label="Operations" minWidth="120"> {() => ( <> <ElButton link type="primary" size="small">Detail</ElButton> <ElButton link type="primary" size="small">Edit</ElButton> </> )} </ElTableColumn> </ElTable> );}
固定列和表头
当您有大量数据块放入表中，您可以同时固定表头和列。
固定列和表头可以同时使用，只需要将上述两个属性分别设置好即可。
export function TableFixedColumnAndHeader() { return ( <ElTable data={wideTableData} height="250" style={fullWidth}> <ElTableColumn fixed prop="date" label="Date" width="150" /> <ElTableColumn prop="name" label="Name" width="120" /> <ElTableColumn prop="state" label="State" width="120" /> <ElTableColumn prop="city" label="City" width="320" /> <ElTableColumn prop="address" label="Address" width="600" /> <ElTableColumn prop="zip" label="Zip" /> </ElTable> );}
流体高度
当数据量动态变化时，可以为 Table 设置一个最大高度。
通过设置 max-height 属性为 el-table 指定最大高度。此时若表格所需的高度大于最大高度，则会显示一个滚动条。
export function TableFixedHeaderFluid() { const [rows, setRows] = useState<User[]>([ { ...tableData[3] }, { ...tableData[1] }, { ...tableData[0] }, ]); const removeRow = (index: number) => { setRows((prev) => prev.filter((_row, rowIndex) => rowIndex !== index)); }; const addItem = () => { setRows((prev) => [ ...prev, { ...tableData[2], id: Date.now(), date: new Date().toISOString().slice(0, 10), }, ]); }; return ( <> <ElTable data={rows} maxHeight="250" style={fullWidth}> <ElTableColumn fixed prop="date" label="Date" width="150" /> <ElTableColumn prop="name" label="Name" width="120" /> <ElTableColumn prop="state" label="State" width="120" /> <ElTableColumn prop="city" label="City" width="120" /> <ElTableColumn prop="address" label="Address" width="600" /> <ElTableColumn prop="zip" label="Zip" width="120" /> <ElTableColumn fixed="right" label="Operations" minWidth="120"> {({ $index }) => ( <ElButton link type="primary" size="small" onClick={() => removeRow($index)}> Remove </ElButton> )} </ElTableColumn> </ElTable> <ElButton style={{ width: "100%", marginTop: 16 }} onClick={addItem}> Add Item </ElButton> </> );}
多级表头
数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系。
只需要将el-table-column 放置于el-table-column 中，你可以实现组头。
export function TableGroupHeader() { return ( <ElTable data={wideTableData} border style={fullWidth}> <ElTableColumn prop="date" label="Date" width="150" /> <ElTableColumn label="Delivery Info"> <ElTableColumn prop="name" label="Name" width="120" /> <ElTableColumn label="Address Info"> <ElTableColumn prop="state" label="State" width="120" /> <ElTableColumn prop="city" label="City" width="120" /> <ElTableColumn prop="address" label="Address" /> <ElTableColumn prop="zip" label="Zip" width="120" /> </ElTableColumn> </ElTableColumn> </ElTable> );}
固定表头
支持固定群组头
组头的属性 fixed 由最外层 el-table-column决定
export function TableFixedGroupHeader() { return ( <ElTable data={wideTableData} height="250" style={fullWidth}> <ElTableColumn fixed prop="date" label="Date" width="150" /> <ElTableColumn prop="name" label="Name" width="120" /> <ElTableColumn prop="state" label="State" width="120" /> <ElTableColumn prop="city" label="City" width="320" /> <ElTableColumn prop="address" label="Address" width="600" /> <ElTableColumn prop="zip" label="Zip" /> </ElTable> );}
单选
选择单行数据时使用色块表示。
Table 组件提供了单选的支持，只需要配置 highlight-current-row 属性即可实现单选。之后由 current-change 事件来管理选中时触发的事件，它会传入 currentRow，oldCurrentRow。如果需要显示索引，可以增加一列 el-table-column，设置 type 属性为 index 即可显示从 1 开始的索引号。
export function TableSingleSelect() { const tableRef = useRef<TableExpose>(null); return ( <> <ElTable ref={tableRef} data={tableData} highlightCurrentRow style={fullWidth} > <ElTableColumn type="index" width="50" /> <ElTableColumn prop="date" label="Date" width="120" /> <ElTableColumn prop="name" label="Name" width="120" /> <ElTableColumn prop="address" label="Address" /> </ElTable> <div style={{ marginTop: 20 }}> <ElButton onClick={() => tableRef.current?.setCurrentRow(tableData[1])}> Select second row </ElButton> <ElButton onClick={() => tableRef.current?.setCurrentRow()}>Clear selection</ElButton> </div> </> );}
多选
你也可以选择多行。
在2.8.3 之后， toggleRowSelection 支持第三个参数 ignoreSelectable 以确定是否忽略可选属性。
实现多选非常简单: 手动添加一个 el-table-column，设 type 属性为 selection 即可；
export function TableMultiSelect() { const tableRef = useRef<TableExpose>(null); const selectable = (row: User) => ![1, 2].includes(Number(row.id)); return ( <> <ElTable ref={tableRef} data={wideTableData} rowKey="id" style={fullWidth}> <ElTableColumn type="selection" selectable={selectable} width="55" /> <ElTableColumn prop="date" label="Date" width="120" /> <ElTableColumn prop="name" label="Name" width="120" /> <ElTableColumn prop="address" label="Address" /> </ElTable> <div style={{ marginTop: 20 }}> <ElButton onClick={() => { [wideTableData[1], wideTableData[2]].forEach((row) => tableRef.current?.toggleRowSelection(row), ); }} > Toggle selection status of second and third rows </ElButton> <ElButton onClick={() => { [wideTableData[1], wideTableData[2]].forEach((row) => tableRef.current?.toggleRowSelection(row, false, true), ); }} > Toggle selection status based on selectable </ElButton> <ElButton onClick={() => tableRef.current?.clearSelection()}>Clear selection</ElButton> </div> </> );}
排序
对表格进行排序，可快速查找或对比数据。
在列中设置 sortable 属性即可实现以该列为基准的排序，接受一个 Boolean，默认为 false。可以通过 Table 的 default-sort 属性设置默认的排序列和排序顺序。可以使用 sort-method 或者 sort-by 使用自定义的排序规则。如果需要后端排序，需将 sortable 设置为 custom，同时在 Table 上监听 sort-change 事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。在本例中，我们还使用了 formatter 属性，它用于格式化指定列的值，接受一个 Function，会传入两个参数：row 和 column，可以根据自己的需求进行处理。
export function TableSort() { return ( <ElTable data={tableData} defaultSort={{ prop: "date", order: "descending" }} style={fullWidth} > <ElTableColumn prop="date" label="Date" sortable width="180" /> <ElTableColumn prop="name" label="Name" width="180" /> <ElTableColumn prop="address" label="Address" formatter={(row) => (row as User).address} /> </ElTable> );}
筛选
对表格进行筛选，可快速查找到自己想看的数据。
在列中设置 filters 和 filter-method 属性即可开启该列的筛选， filters 是一个数组，filter-method 是一个方法，它用于决定某些数据是否显示，会传入三个参数：value, row 和 column。
export function TableFilter() { const tableRef = useRef<TableExpose>(null); const filters = [ { text: "2016-05-01", value: "2016-05-01" }, { text: "2016-05-02", value: "2016-05-02" }, { text: "2016-05-03", value: "2016-05-03" }, { text: "2016-05-04", value: "2016-05-04" }, ]; const tags = [ { text: "Home", value: "Home" }, { text: "Office", value: "Office" }, ]; return ( <> <ElButton onClick={() => tableRef.current?.clearFilter(["date"])}> reset date filter </ElButton> <ElButton onClick={() => tableRef.current?.clearFilter()}> reset all filters </ElButton> <ElTable ref={tableRef} rowKey="date" data={tableData} style={fullWidth}> <ElTableColumn prop="date" label="Date" sortable width="180" columnKey="date" filters={filters} filterMethod={(value, row) => (row as User).date === value} /> <ElTableColumn prop="name" label="Name" width="180" /> <ElTableColumn prop="address" label="Address" formatter={(row) => (row as User).address} /> <ElTableColumn prop="tag" label="Tag" width="100" filters={tags} filterMethod={(value, row) => (row as User).tag === value} filterPlacement="bottom-end" > {({ row }) => ( <ElTag type={(row as User).tag === "Home" ? "primary" : "success"} disableTransitions > {(row as User).tag} </ElTag> )} </ElTableColumn> </ElTable> </> );}
自定义列模板
自定义列的显示内容，可组合其他组件使用。
通过 slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据，用法参考 demo。
export function TableCustomColumn() { return ( <ElTable data={tableData} style={fullWidth}> <ElTableColumn label="Date" width="180"> {({ row }) => ( <div style={{ display: "flex", alignItems: "center" }}> <ElIcon> <Timer /> </ElIcon> <span style={{ marginLeft: 10 }}>{(row as User).date}</span> </div> )} </ElTableColumn> <ElTableColumn label="Name" width="180"> {({ row }) => ( <ElPopover effect="light" trigger="hover" placement="top" width="auto" content={ <> <div>name: {(row as User).name}</div> <div>address: {(row as User).address}</div> </> } > <ElTag>{(row as User).name}</ElTag> </ElPopover> )} </ElTableColumn> <ElTableColumn label="Operations"> {({ row }) => ( <> <ElButton size="small" onClick={() => console.log("edit", row)}> Edit </ElButton> <ElButton size="small" type="danger" onClick={() => console.log("delete", row)} > Delete </ElButton> </> )} </ElTableColumn> </ElTable> );}
自定义表头
表头支持自定义。
export function TableCustomHeader() { const [search, setSearch] = useState(""); const headerData = tableData.map((row, index) => ({ ...row, name: ["Tom", "John", "Morgan", "Jessy"][index], })); const filteredData = headerData.filter( (row) => !search || row.name.toLowerCase().includes(search.toLowerCase()), ); return ( <ElTable data={filteredData} style={fullWidth}> <ElTableColumn label="Date" prop="date" /> <ElTableColumn label="Name" prop="name" /> <ElTableColumn align="right" renderHeader={() => ( <ElInput value={search} size="small" placeholder="Type to search" onChange={setSearch} /> )} > {({ $index, row }) => ( <> <ElButton size="small" onClick={() => console.log("edit", $index, row)}> Edit </ElButton> <ElButton size="small" type="danger" onClick={() => console.log("delete", $index, row)} > Delete </ElButton> </> )} </ElTableColumn> </ElTable> );}
展开行
当行内容过多并且不想显示横向滚动条时，可以使用 Table 展开行功能。
在 2.9.7 版本后，新增了 preserve-expanded-content 属性，用于控制折叠时是否在 DOM 中保留已展开的行内容。
通过设置 type="expand" 和 slot 可以开启展开行功能， el-table-column 的模板会被渲染成为展开行的内容，展开行可访问的属性与使用自定义列模板时的 slot 相同。
switch parent border:switch child border:preserve expanded: export function TableExpandable() { const [parentBorder, setParentBorder] = useState(false); const [childBorder, setChildBorder] = useState(false); const [preserveExpanded, setPreserveExpanded] = useState(false); return ( <div> <div style={{ display: "flex", alignItems: "center", gap: 4 }}> <span>switch parent border:</span> <ElSwitch checked={parentBorder} onCheckedChange={setParentBorder} /> <span>switch child border:</span> <ElSwitch checked={childBorder} onCheckedChange={setChildBorder} /> <span>preserve expanded:</span> <ElSwitch checked={preserveExpanded} onCheckedChange={setPreserveExpanded} /> </div> <ElTable data={expandableData} border={parentBorder} style={fullWidth} renderExpanded={({ row }) => { const familyRow = row as FamilyUser; return ( <div style={{ padding: 16 }}> <p style={{ margin: "0 0 8px" }}>State: {familyRow.state}</p> <p style={{ margin: "0 0 8px" }}>City: {familyRow.city}</p> <p style={{ margin: "0 0 8px" }}>Address: {familyRow.address}</p> <p style={{ margin: "0 0 8px" }}>Zip: {familyRow.zip}</p> <h3>Family</h3> <ElTable data={familyRow.family} border={childBorder}> <ElTableColumn prop="name" label="Name" /> <ElTableColumn prop="state" label="State" /> <ElTableColumn prop="city" label="City" /> <ElTableColumn prop="address" label="Address" /> <ElTableColumn prop="zip" label="Zip" /> </ElTable> </div> ); }} > <ElTableColumn type="expand" /> <ElTableColumn prop="date" label="Date" /> <ElTableColumn prop="name" label="Name" /> </ElTable> </div> );}
树形数据与懒加载
支持树类型的数据的显示。当 row 中包含 children 字段时，被视为树形数据。渲染嵌套数据需要 prop 的 row-key。此外，子行数据可以异步加载。设置 Table 的lazy属性为 true 与加载函数 load 。通过指定 row 中的hasChildren字段来指定哪些行是包含子节点。 children 与hasChildren都可以通过 tree-props 配置。
export function TableTreeAndLazy() { const load = ( _row: DefaultRow, _treeNode: unknown, resolve: (data: DefaultRow[]) => void, ) => { window.setTimeout(() => { resolve([treeRow(31, "2016-05-01"), treeRow(32, "2016-05-01")]); }, 1000); }; return ( <div> <ElTable data={treeAndLazyData} rowKey="id" border defaultExpandAll style={{ ...fullWidth, marginBottom: 20 }} > <ElTableColumn prop="date" label="Date" sortable /> <ElTableColumn prop="name" label="Name" sortable /> <ElTableColumn prop="address" label="Address" sortable /> </ElTable> <ElTable data={lazyData} rowKey="id" border lazy load={load} treeProps={{ children: "children", hasChildren: "hasChildren" }} style={fullWidth} > <ElTableColumn prop="date" label="Date" /> <ElTableColumn prop="name" label="Name" /> <ElTableColumn prop="address" label="Address" /> </ElTable> </div> );}
可选择的树形数据2.8.0
当 treeProps.checkStrictly 为 true，父节点和子节点的选择状态不再关联， 也就是说，当选择父节点时，它的子节点将不被选择； 当 treeProps.checkStrictly 是false，父节点和子节点的选择状态将与子节点的选择状态相关联， 也就是说，当选择父节点时，将选择其所有子节点。
export function TableCheckStrictly() { const [checkStrictly, setCheckStrictly] = useState(false); return ( <> <div style={{ marginBottom: 8 }}> <ElRadioGroup type="button" value={checkStrictly} onChange={(value) => setCheckStrictly(value === true)} > <ElRadio value={true}>true</ElRadio> <ElRadio value={false}>false</ElRadio> </ElRadioGroup> </div> <ElTable data={treeData} rowKey="id" defaultExpandAll treeProps={{ checkStrictly }} style={fullWidth} > <ElTableColumn type="selection" width="55" selectable={(row) => ![1, 31].includes(Number((row as User).id))} /> <ElTableColumn prop="date" label="Date" /> <ElTableColumn prop="name" label="Name" /> <ElTableColumn prop="address" label="Address" /> </ElTable> </> );}
表尾合计行
若表格展示的是各类数字，可以在表尾显示各列的合计。
将 show-summary 设置为true就会在表格尾部展示合计行。默认情况下，对于合计行，第一列不进行数据求合操作，而是显示「合计」二字（可通过sum-text配置），其余列会将本列所有数值进行求合操作，并显示出来。当然，你也可以定义自己的合计逻辑。使用 summary-method 并传入一个方法，返回一个数组，这个数组中的各项就会显示在合计行的各列中，可以是一个 VNode 或 String，具体可以参考本例中的第二个表格。
export function TableSummary() { const getSummaries = (param: { columns: unknown[]; data: unknown[] }) => { const { columns, data } = param; const sums: ReactNode[] = []; columns.forEach((_column, index) => { if (index === 0) { sums[index] = <div style={{ textDecoration: "underline" }}>Total Cost</div>; return; } const property = (columns[index] as { property?: string }).property; const values = (data as User[]).map((item) => Number(item[property as keyof User]), ); if (values.some((value) => Number.isNaN(value))) { sums[index] = "N/A"; return; } sums[index] = `$ ${values.reduce((prev, curr) => prev + curr, 0)}`; }); return sums; }; return ( <> <ElTable data={productData} border showSummary style={fullWidth}> <ElTableColumn prop="id" label="ID" width="180" /> <ElTableColumn prop="name" label="Name" /> <ElTableColumn prop="amount1" label="Amount 1" sortable /> <ElTableColumn prop="amount2" label="Amount 2" sortable /> <ElTableColumn prop="amount3" label="Amount 3" sortable /> </ElTable> <ElTable data={productData} border height="200" showSummary summaryMethod={getSummaries} style={{ ...fullWidth, marginTop: 20 }} > <ElTableColumn prop="id" label="ID" width="180" /> <ElTableColumn prop="name" label="Name" /> <ElTableColumn prop="amount1" label="Cost 1 ($)" /> <ElTableColumn prop="amount2" label="Cost 2 ($)" /> <ElTableColumn prop="amount3" label="Cost 3 ($)" /> </ElTable> </> );}
合并行或列
多行或多列共用一个数据时，可以合并行或列。
通过给 table 传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行 row、当前列 column、当前行号 rowIndex、当前列号 columnIndex 四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表 rowspan，第二个元素代表 colspan。也可以返回一个键名为 rowspan 和 colspan 的对象。
export function TableSpan() { const spanData: User[] = [ { ...tableData[0], id: 12987122, amount1: 234, amount2: 3.2, amount3: 10 }, { ...tableData[1], id: 12987123, amount1: 165, amount2: 4.43, amount3: 12 }, { ...tableData[2], id: 12987124, amount1: 324, amount2: 1.9, amount3: 9 }, { ...tableData[3], id: 12987125, amount1: 621, amount2: 2.2, amount3: 17 }, { ...tableData[0], id: 12987126, amount1: 539, amount2: 4.1, amount3: 15 }, ]; const arraySpanMethod = ({ rowIndex, columnIndex, }: { rowIndex: number; columnIndex: number; }) => { if (rowIndex % 2 === 0) { if (columnIndex === 0) return [1, 2]; if (columnIndex === 1) return [0, 0]; } return undefined; }; const objectSpanMethod = ({ rowIndex, columnIndex, }: { rowIndex: number; columnIndex: number; }) => { if (columnIndex === 0) { return rowIndex % 2 === 0 ? { rowspan: 2, colspan: 1 } : { rowspan: 0, colspan: 0 }; } return undefined; }; return ( <div> <ElTable data={spanData} border spanMethod={arraySpanMethod} style={fullWidth}> <ElTableColumn prop="id" label="ID" width="180" /> <ElTableColumn prop="name" label="Name" /> <ElTableColumn prop="amount1" sortable label="Amount 1" /> <ElTableColumn prop="amount2" sortable label="Amount 2" /> <ElTableColumn prop="amount3" sortable label="Amount 3" /> </ElTable> <ElTable data={spanData} border spanMethod={objectSpanMethod} style={{ ...fullWidth, marginTop: 20 }} > <ElTableColumn prop="id" label="ID" width="180" /> <ElTableColumn prop="name" label="Name" /> <ElTableColumn prop="amount1" label="Amount 1" /> <ElTableColumn prop="amount2" label="Amount 2" /> <ElTableColumn prop="amount3" label="Amount 3" /> </ElTable> </div> );}
自定义索引
自定义 type=index 列的行号。
通过给 type=index 的列传入 index 属性，可以自定义索引。该属性传入数字时，将作为索引的起始值。也可以传入一个方法，它提供当前行的行号（从 0 开始）作为参数，返回值将作为索引展示。
export function TableCustomIndex() { return ( <ElTable data={tableData} style={fullWidth}> <ElTableColumn type="index" index={(index) => index * 2} /> <ElTableColumn prop="date" label="Date" width="180" /> <ElTableColumn prop="name" label="Name" width="180" /> <ElTableColumn prop="address" label="Address" /> </ElTable> );}
表格布局
通过属性 table-layout 可以指定表格中单元格、行和列的布局方式
export function TableLayout() { const [tableLayout, setTableLayout] = useState<"fixed" | "auto">("fixed"); return ( <> <div style={{ marginBottom: 8 }}> <ElRadioGroup type="button" value={tableLayout} onChange={(value) => setTableLayout(value === "auto" ? "auto" : "fixed")} > <ElRadio value="fixed">fixed</ElRadio> <ElRadio value="auto">auto</ElRadio> </ElRadioGroup> </div> <ElTable data={tableData} tableLayout={tableLayout}> <ElTableColumn prop="date" label="Date" /> <ElTableColumn prop="name" label="Name" /> <ElTableColumn prop="address" label="Address" /> </ElTable> </> );}
您可以使用 tooltip-formatter 自定义 Tooltip 提示内容。
export function TableTooltipFormatter() { const data: TooltipRow[] = [ { address: "Lohrbergstr. 86c, Süd Lilli, Saarland", tags: ["Office", "Home", "Park", "Garden"], url: "https://github.com/element-plus/element-plus/issues", }, { address: "760 A Street, South Frankfield, Illinois", tags: ["error", "warning", "success", "info"], url: "https://github.com/element-plus/element-plus/pulls", }, { address: "Arnold-Ohletz-Str. 41a, Alt Malinascheid, Thüringen", tags: ["one", "two", "three", "four", "five"], url: "https://github.com/element-plus/element-plus/discussions", }, { address: "23618 Windsor Drive, West Ricardoview, Idaho", tags: ["blue", "white", "dark", "gray", "red", "bright"], url: "https://github.com/element-plus/element-plus/actions", }, ]; return ( <ElTable data={data} showOverflowTooltip tooltipFormatter={({ cellValue }) => `${String(cellValue)}: table formatter`} style={fullWidth} > <ElTableColumn prop="address" label="extends table formatter" width="240" /> <ElTableColumn prop="tags" label="formatter object" width="240" tooltipFormatter={({ row }) => (row as TooltipRow).tags.join(", ")} > {({ row }) => (row as TooltipRow).tags.map((tag) => ( <ElTag key={tag} type="primary" className={tableStyles.tagItem}> {tag} </ElTag> )) } </ElTableColumn> <ElTableColumn prop="url" label="with vnode" width="240" tooltipFormatter={({ cellValue }) => ( <ElLink type="primary" href={String(cellValue)}> {String(cellValue)} </ElLink> )} /> </ElTable> );}
Table API
Table Attributes
| 属性名 | 说明 | 类型 | 默认值 |
|---|
| data | 表格数据 | array | [] |
| size | 表格尺寸 | enum | — |
| height | 表格高度，传入后表头固定 | string / number | — |
| max-height | 表格最大高度 | string / number | — |
| fit | 列宽是否自动撑满容器 | boolean | true |
| stripe | 是否显示斑马纹 | boolean | false |
| border | 是否显示纵向边框 | boolean | false |
| row-key | 行数据的 Key，树形数据与保留选中态时必填 | string / Function | — |
| show-header | 是否显示表头 | boolean | true |
| show-summary | 是否显示合计行 | boolean | false |
| sum-text | 合计行第一列的文案 | string | 合计 |
| summary-method | 自定义合计方法 | Function | — |
| row-class-name | 行类名 | string / Function | — |
| row-style | 行样式 | object / Function | — |
| cell-class-name | 单元格类名 | string / Function | — |
| cell-style | 单元格样式 | object / Function | — |
| header-row-class-name | 表头行类名 | string / Function | — |
| header-row-style | 表头行样式 | object / Function | — |
| header-cell-class-name | 表头单元格类名 | string / Function | — |
| header-cell-style | 表头单元格样式 | object / Function | — |
| highlight-current-row | 是否高亮当前行 | boolean | false |
| empty-text | 空数据文案 | string | 暂无数据 |
| empty | 自定义空状态内容 | ReactNode | — |
| append | 表格尾部追加内容 | ReactNode | — |
| default-sort | 默认排序 | object | — |
| span-method | 合并行或列的方法 | Function | — |
| table-layout | 表格布局方式 | enum | fixed |
| scrollbar-always-on | 是否总是显示滚动条 | boolean | false |
| show-overflow-tooltip | 内容过长是否显示省略号并提供提示 | boolean | false |
| tooltip-formatter | 表格级溢出提示内容格式化 | Function | — |
| tree-props | 树形数据字段配置 | object | — |
| lazy | 是否懒加载子节点（需 rowKey） | boolean | false |
| load | 懒加载子节点方法 | Function | — |
| default-expand-all | 是否默认展开所有树节点 | boolean | false |
| expand-row-keys | 默认展开的树节点 key | array | — |
| indent | 树形层级缩进（px） | number | 16 |
| render-expanded | 展开行内容 | Function | — |
| row-expandable | 本行是否可展开 | Function | — |
Table Events
| 事件名 | 说明 | 参数 |
|---|
| onSelect | 用户勾选/取消某一行时触发 | Function |
| onSelectAll | 用户全选/取消全选时触发 | Function |
| onSelectionChange | 选中项变化时触发 | Function |
| onRowClick | 某一行被点击 | Function |
| onCellClick | 某个单元格被点击 | Function |
| onSortChange | 排序变化 | Function |
| onFilterChange | 筛选条件变化 | Function |
| onCurrentChange | 当前行变化（单选） | Function |
| onExpandChange | 展开行/树节点变化 | Function |
| onHeaderClick | 表头单元格点击 | Function |
| onHeaderDragend | 列宽拖拽结束 | Function |
Table Exposes
| 方法名 | 说明 |
|---|
| clearSelection | 清空用户选择 |
| getSelectionRows | 返回当前选中的行 |
| toggleRowSelection | 切换某行的选中状态，参数 (row, selected?, ignoreSelectable?) |
| toggleAllSelection | 切换全选/取消全选 |
| setCurrentRow | 设置当前行 |
| toggleRowExpansion | 切换展开行或树节点的展开状态 |
| clearSort | 清空排序 |
| sort | 手动排序，参数为 prop 与 order |
| clearFilter | 清空筛选，参数 columnKeys?: string | string[] |
| doLayout | 重新计算表格布局 |
Table-column API
Table-column Attributes
| 属性名 | 说明 | 类型 | 默认值 |
|---|
| type | 对应列的类型 | enum | default |
| prop | 字段名，也可用 property | string | — |
| label | 列标题 | string | — |
| width | 列宽 | string / number | — |
| min-width | 列最小宽度 | string / number | — |
| fixed | 是否固定 | boolean / enum | — |
| align | 对齐方式 | enum | — |
| header-align | 表头对齐方式 | enum | 跟随 align |
| sortable | 是否可排序，传 'custom' 时不走内置排序 | boolean / string | false |
| sort-method | 自定义排序比较函数 | Function | — |
| sort-by | 排序字段 | string / array / Function | — |
| sort-orders | 排序状态循环顺序 | array | ['ascending', 'descending', null] |
| resizable | 列宽是否可拖动 | boolean | true |
| column-key | 列标识 | string | — |
| class-name | 列类名 | string | — |
| label-class-name | 表头类名 | string | — |
| show-overflow-tooltip | 内容过长是否省略 | boolean | false |
| tooltip-formatter | 列级溢出提示内容格式化 | Function | — |
| formatter | 内容格式化函数 | Function | — |
| selectable | selection 列中该行是否可勾选 | Function | — |
| filters | 筛选选项 | array | — |
| filter-multiple | 是否多选筛选 | boolean | true |
| filter-method | 筛选逻辑 | Function | — |
| filter-placement | 筛选面板位置 | string | bottom-start |
| filter-class-name | 筛选面板类名 | string | — |
| filtered-value | 受控筛选值 | array | — |
| index | index 列的自定义下标 | number / Function | — |
Table Slots（React 属性）
| 插槽名 | 说明 | React 写法 |
|---|
| empty | 空状态内容 | empty 属性 |
| append | 表格尾部追加内容 | append 属性 |
Table-column Slots
| 插槽名 | 说明 | React 写法 |
|---|
| default | 自定义单元格内容，参数 { row, column, $index } | children 函数 |
| header | 自定义表头内容，参数 { column, $index } | renderHeader 函数 |
