Table

A secondary encapsulation of the element-plus table component. Simplifies table configuration.

Basic Usage

Tree Table

Functional Table

Table Attributes

Attribute	Description	Type	Extensible	Default Value
data	Table data	Array	No	—
columns	Column configuration	TableColumn[]	Yes	—
height	Height of the table. Defaults to automatic height, and the table's height is controlled by external styles.	enum	No	—
max-height	Maximum height of the table	enum	No	—
stripe	Whether to use striped rows	boolean	No	false
border	Whether to have vertical borders	boolean	No	true
size	Size of the Table	enum	No	—
fit	Whether the column width should stretch to fit	boolean	No	true
show-header	Whether to show the table header	boolean	No	true
highlight-current-row	Whether to highlight the current row	boolean	No	false
current-row-key	Key of the current row, read-only	enum	No	—
row-class-name	Callback method for row className, or use a string to set a fixed className for all rows.	enum	No	—
row-style	Callback method for row style, or use a fixed Object to set the same style for all rows.	enum	No	—
cell-class-name	Callback method for cell className, or use a string to set a fixed className for all cells.	enum	No	—
cell-style	Callback method for cell style, or use a fixed Object to set the same style for all cells.	enum	No	—
header-row-class-name	Callback method for header row className, or use a string to set a fixed className for all header rows.	enum	No	—
header-row-style	Callback method for header row style, or use a fixed Object to set the same style for all header rows.	enum	No	—
header-cell-class-name	Callback method for header cell className, or use a string to set a fixed className for all header cells.	enum	No	—
header-cell-style	Callback method for header cell style, or use a fixed Object to set the same style for all header cells.	enum	No	—
row-key	Key for row data to optimize Table rendering; required when using reserve-selection functionality or displaying tree data.	enum	No	id
empty-text	Text content to display when there is no data; can also be set through a slot.	string	No	No Data
default-expand-all	Whether to expand all rows by default, effective when the Table contains expandable rows or is a tree table.	boolean	No	false
expand-row-keys	Set the currently expanded rows using this property; needs row-key to be set, this property is an array of expanded row keys.	Array	No	—
default-sort	Default sorting column's prop and order. The prop attribute specifies the default sorting column, order specifies the default sorting order.	object	No	prop set, order default ascending
tooltip-effect	Effect of the overflow tooltip	enum	No	dark
tooltip-options	Options for overflow tooltip, refer to the tooltip component below.	object	No	object
show-summary	Whether to show a summary row at the bottom of the table	boolean	No	false
sum-text	Text to display in the first column of the summary row	string	No	Sum
summary-method	Custom summary calculation method	Function	No	—
span-method	Method to merge rows or columns	Function	No	—
select-on-indeterminate	In a multi-select table, the behavior when only some rows are selected and the header checkbox is clicked. If true, select all rows; if false, deselect all rows.	boolean	No	true
indent	Indentation of tree nodes when displaying tree data	number	No	16
lazy	Whether to lazily load child node data	boolean	No	false
load	Function to load child node data, effective when lazy is true.	Function	No	—
tree-props	Configuration options for rendering nested data	object	No	object
table-layout	Set the layout method for table cells, rows, and columns	enum	No	fixed
scrollbar-always-on	Always show scrollbars	boolean	No	false
show-overflow-tooltip	Whether to hide extra content and use Tooltip to show them on hover. This affects the display of all columns.	enum	No	—
flexible	Ensure the minimum size of the main axis to avoid overflow of content.	boolean	No	false

TableColumn Attributes

Attribute	Description	Type	Extensible	Default Value
type	Column type. If set to selection, shows a checkbox; if set to index, shows the row index (starting from 1); if set to expand, shows an expandable button.	enum	No	default
index	If type=index is set, you can use the index property to customize the index.	enum	No	—
label	Display title	string	No	—
column-key	Column key, required to identify which column's filter conditions are being used for filter-change events.	string	No	—
prop	Field name corresponding to the column's content, can also use the property attribute.	string	No	—
width	Width of the column	enum	No	''
min-width	Minimum width of the column. Unlike width, min-width allocates remaining width proportionally to columns with min-width set.	enum	No	''
fixed	Whether the column is fixed to the left or right. True indicates fixed to the left.	enum	No	false
render-header	Function for rendering the column header label area	Function	No	—
sortable	Whether the column can be sorted. If set to 'custom', remote sorting is needed and the Table's sort-change event needs to be listened to.	enum	No	false
sort-method	Specify which property the data is sorted by, valid only when sortable is true. Should return a Number like Array.sort.	Function	No	—
sort-by	Specify which property the data is sorted by, valid only when sortable is true and no sort-method is set. If sort-by is an array, it sorts by the first property, then the second if the first is the same.	enum	No	—
sort-orders	the order of the sorting strategies used when sorting the data, works when sortable is true. Accepts an array, as the user clicks on the header, the column is sorted in order of the elements in the array	object	No	['ascending', 'descending', null]
resizable	whether column width can be resized, works when border of el-table is true	boolean	No	true
formatter	function that formats cell content	Function	No	—
show-overflow-tooltip	whether to hide extra content and show them in a tooltip when hovering on the cell	enum	No	undefined
align	alignment	enum	No	center
header-align	alignment of the table header. If omitted, the value of the above align attribute will be applied	enum	No	center
class-name	class name of cells in the column	string	No	—
class-name	class name of the label of this column	string	No	—
label-class-name		string	No	—
selectable	function that determines if a certain row can be selected, works when type is 'selection'	Function	No	—
reserve-selection	whether to reserve selection after data refreshing, works when type is 'selection'. Note that row-key is required for this to work	boolean	No	false
filters	an array of data filtering options. For each element in this array, text and value are required	object	No	—
filter-placement	placement for the filter dropdown	enum	No	—
filter-class-name	className for the filter dropdown	string	No	—
filter-multiple	whether data filtering supports multiple options	boolean	No	true
filter-method	data filtering method. If filter-multiple is on, this method will be called multiple times for each row, and a row will display if one of the calls returns true	function	No	—
filtered-value	filter value for selected data, might be useful when table header is rendered with render-header	object	No	—

Slots

Name	Description	Type
${prop}	Slot for data columns, suitable for complex data processing	object
header-${prop}	General header slot, associated through the prop of columns item	object
append	Content inserted after the last row of the table	-
empty	Custom content when data is empty	-

Events

Name	Description	Type	Expand
select	Event triggered when the user manually checks a data row's checkbox	Function	No
select-all	Event triggered when the user manually checks the "select all" checkbox	Function	No
selection-change	Event triggered when the selected items change	Function	No
cell-mouse-enter	Event triggered when hovering enters a cell	Function	No
cell-mouse-leave	Event triggered when hovering leaves a cell	Function	No
cell-click	Event triggered when a cell is clicked	Function	No
cell-dblclick	Event triggered when a cell is double-clicked	Function	No
cell-contextmenu	Event triggered when a cell is right-clicked	Function	No
row-click	Event triggered when a row is clicked	Function	No
row-contextmenu	Event triggered when a row is right-clicked	Function	No
row-dblclick	Event triggered when a row is double-clicked	Function	No
header-click	Event triggered when a column header is clicked	Function	No
header-contextmenu	Event triggered when a column header is right-clicked	Function	No
sort-change	Event triggered when the table's sorting conditions change	Function	No
filter-change	Key of the column; if you need to use the filter-change event, this property identifies which column's filter condition	Function	No
current-change	Event triggered when the table's current row changes. If you want to highlight the current row, enable the table's highlight-current-row property	Function	No
header-dragend	Event triggered when the width of a column is changed by dragging the column header	Function	No
expand-change	Event triggered when a user expands or collapses a row (when expanding rows, the second parameter of the callback is expandedRows; for tree tables, the second parameter is expanded)	Function	No

Table Exposes

Method Name	Description	Type
getTableRef	Get the el-table instance. Methods under El-Table Exposes need to be called on the instance obtained from this method.	Function

El-Table Exposes

Method Name	Description	Type
clearSelection	For multi-select tables, clear the user's selection	Function
getSelectionRows	Return the currently selected rows	Function
toggleRowSelection	For multi-select tables, toggle the selection state of a specific row. With a second parameter, you can directly set the row's selection state.	Function
toggleAllSelection	For multi-select tables, toggle between select all and deselect all	Function
toggleRowExpansion	For expandable tables or tree tables, toggle expansion for a row. With a second parameter, you can directly set whether the row should be expanded or collapsed.	Function
setCurrentRow	For single-select tables, set a row as the selected row. If called without parameters, it will cancel the selection of the currently highlighted row.	Function
clearSort	Clear the sorting condition, reverting the data to an unsorted state	Function
clearFilter	Clear the filter conditions for specified columns. If no parameters are passed, clear all filters.	Function
doLayout	Re-layout the Table. You may need to call this method to get the correct layout when the table's visibility changes.	Function
sort	Manually sort the table. The prop attribute specifies the sorting column, and order specifies the sorting order.	Function
scrollTo	Scroll to a specific set of coordinates	Function
setScrollTop	Set the vertical scroll position	Function
setScrollLeft	Set the horizontal scroll position	Function
columns el^2.7.6	Get the context of the table columns	array