Components for presenting and organizing data including tables, lists, cards, and statistical displays with advanced features like virtualization.
Comprehensive data table with sorting, filtering, and selection.
declare const ElTable: Component;
interface TableProps {
/** Table data */
data?: any[];
/** Table height */
height?: string | number;
/** Maximum table height */
maxHeight?: string | number;
/** Whether table is striped */
stripe?: boolean;
/** Whether table has border */
border?: boolean;
/** Table size */
size?: ComponentSize;
/** Whether table fits container */
fit?: boolean;
/** Whether to show header */
showHeader?: boolean;
/** Whether to highlight current row */
highlightCurrentRow?: boolean;
/** Current row key */
currentRowKey?: string | number;
/** Row class name function */
rowClassName?: string | ((row: any, rowIndex: number) => string);
/** Row style function */
rowStyle?: object | ((row: any, rowIndex: number) => object);
/** Cell class name function */
cellClassName?: string | ((row: any, column: any, rowIndex: number, columnIndex: number) => string);
/** Cell style function */
cellStyle?: object | ((row: any, column: any, rowIndex: number, columnIndex: number) => object);
/** Header row class name */
headerRowClassName?: string | ((row: any, rowIndex: number) => string);
/** Header row style */
headerRowStyle?: object | ((row: any, rowIndex: number) => object);
/** Header cell class name */
headerCellClassName?: string | ((row: any, column: any, rowIndex: number, columnIndex: number) => string);
/** Header cell style */
headerCellStyle?: object | ((row: any, column: any, rowIndex: number, columnIndex: number) => object);
/** Row key */
rowKey?: string | ((row: any) => string);
/** Empty text */
emptyText?: string;
/** Whether to expand all rows by default */
defaultExpandAll?: boolean;
/** Expanded row keys */
expandRowKeys?: (string | number)[];
/** Default sort */
defaultSort?: { prop: string; order: 'ascending' | 'descending' };
/** Tooltip effect */
tooltipEffect?: 'dark' | 'light';
/** Whether to show summary */
showSummary?: boolean;
/** Sum text */
sumText?: string;
/** Summary method */
summaryMethod?: (columns: any[], data: any[]) => string[];
/** Span method */
spanMethod?: (row: any, column: any, rowIndex: number, columnIndex: number) => number[] | { rowspan: number; colspan: number };
/** Select on indeterminate */
selectOnIndeterminate?: boolean;
/** Indent size for tree data */
indent?: number;
/** Tree props */
treeProps?: { hasChildren?: string; children?: string; checkStrictly?: boolean };
/** Loading state */
loading?: boolean;
/** Scrollbar always on */
scrollbarAlwaysOn?: boolean;
}
declare const ElTableColumn: Component;
interface TableColumnProps {
/** Column type */
type?: 'selection' | 'index' | 'expand';
/** Column index in case of type=index */
index?: number | ((index: number) => number);
/** Column prop key */
prop?: string;
/** Column label */
label?: string;
/** Column width */
width?: string | number;
/** Column minimum width */
minWidth?: string | number;
/** Column fixed position */
fixed?: boolean | 'left' | 'right';
/** Render header function */
renderHeader?: (column: any, index: number) => any;
/** Whether column is sortable */
sortable?: boolean | 'custom';
/** Sort method */
sortMethod?: (a: any, b: any) => number;
/** Sort by */
sortBy?: string | string[] | ((row: any, index: number) => string);
/** Sort orders */
sortOrders?: ('ascending' | 'descending' | null)[];
/** Whether column is resizable */
resizable?: boolean;
/** Column formatter */
formatter?: (row: any, column: any, cellValue: any, index: number) => any;
/** Whether to show overflow tooltip */
showOverflowTooltip?: boolean | { effect?: 'dark' | 'light'; placement?: string; };
/** Column alignment */
align?: 'left' | 'center' | 'right';
/** Header alignment */
headerAlign?: 'left' | 'center' | 'right';
/** Column class name */
className?: string;
/** Label class name */
labelClassName?: string;
/** Whether column is selectable */
selectable?: (row: any, index: number) => boolean;
/** Reserve selection */
reserveSelection?: boolean;
/** Filter method */
filterMethod?: (value: any, row: any, column: any) => boolean;
/** Filtered value */
filteredValue?: any[];
/** Filter options */
filters?: { text: string; value: any }[];
/** Filter placement */
filterPlacement?: string;
/** Whether filter has multiple selection */
filterMultiple?: boolean;
}High-performance table for large datasets.
declare const ElTableV2: Component;
interface TableV2Props {
/** Table data */
data: any[];
/** Table columns */
columns: TableV2Column[];
/** Table width */
width: number;
/** Table height */
height: number;
/** Header height */
headerHeight?: number;
/** Row height */
rowHeight?: number | ((rowIndex: number) => number);
/** Cache size */
cache?: number;
/** Estimated row height */
estimatedRowHeight?: number;
/** Row key getter */
rowKey?: string | ((rowData: any) => string);
/** Fixed columns */
fixed?: 'left' | 'right';
/** Sort state */
sortState?: { key: string; order: 'asc' | 'desc' };
}
interface TableV2Column {
key: string;
title: string;
dataKey: string;
width: number;
minWidth?: number;
maxWidth?: number;
sortable?: boolean;
align?: 'left' | 'center' | 'right';
fixed?: 'left' | 'right';
cellRenderer?: (cellData: any) => any;
headerCellRenderer?: (column: TableV2Column) => any;
}Hierarchical tree data display.
declare const ElTree: Component;
interface TreeProps {
/** Tree data */
data?: TreeNode[];
/** Whether tree is empty */
emptyText?: string;
/** Node key property */
nodeKey?: string;
/** Tree properties configuration */
props?: TreeProps;
/** Whether to render after first expand */
renderAfterExpand?: boolean;
/** Load data method */
load?: (node: TreeNode, resolve: Function) => void;
/** Whether to render content lazily */
renderContent?: (h: Function, context: { node: TreeNode; data: any; store: any }) => any;
/** Whether to highlight current node */
highlightCurrent?: boolean;
/** Whether nodes are expandable */
defaultExpandAll?: boolean;
/** Whether to expand on click node */
expandOnClickNode?: boolean;
/** Whether to check on click node */
checkOnClickNode?: boolean;
/** Whether parent node is checked affects children */
autoExpandParent?: boolean;
/** Default expanded keys */
defaultExpandedKeys?: (string | number)[];
/** Whether to show checkbox */
showCheckbox?: boolean;
/** Whether to check strictly */
checkStrictly?: boolean;
/** Default checked keys */
defaultCheckedKeys?: (string | number)[];
/** Current node key */
currentNodeKey?: string | number;
/** Filter node method */
filterNodeMethod?: (value: any, data: any, node: TreeNode) => boolean;
/** Accordion mode */
accordion?: boolean;
/** Indent size */
indent?: number;
/** Custom node icon */
icon?: string | Component;
}
interface TreeNode {
id?: string | number;
label?: string;
children?: TreeNode[];
disabled?: boolean;
isLeaf?: boolean;
[key: string]: any;
}
interface TreeNodeProps {
label?: string;
children?: string;
disabled?: string;
isLeaf?: string;
}Data pagination with page navigation.
declare const ElPagination: Component;
interface PaginationProps {
/** Whether to use small pagination */
small?: boolean;
/** Whether pagination is disabled */
disabled?: boolean;
/** Whether to show background */
background?: boolean;
/** Total items */
total?: number;
/** Items per page */
pageSize?: number;
/** Default page size */
defaultPageSize?: number;
/** Current page */
currentPage?: number;
/** Default current page */
defaultCurrentPage?: number;
/** Page count */
pageCount?: number;
/** Pager count */
pagerCount?: number;
/** Page sizes options */
pageSizes?: number[];
/** Popper class for page sizes select */
popperClass?: string;
/** Previous page text */
prevText?: string;
/** Next page text */
nextText?: string;
/** Layout components */
layout?: string;
/** Whether to hide pagination when single page */
hideOnSinglePage?: boolean;
}
interface PaginationEmits {
/** Size change event */
'size-change': (size: number) => void;
/** Current change event */
'current-change': (current: number) => void;
/** Previous click event */
'prev-click': (current: number) => void;
/** Next click event */
'next-click': (current: number) => void;
}Card wrapper for content grouping.
declare const ElCard: Component;
interface CardProps {
/** Card header */
header?: string;
/** Body padding */
bodyPadding?: string | number;
/** Body style */
bodyStyle?: object;
/** Shadow display */
shadow?: 'always' | 'hover' | 'never';
}Tag for labeling and categorization.
declare const ElTag: Component;
interface TagProps {
/** Tag type */
type?: '' | 'success' | 'info' | 'warning' | 'danger';
/** Whether tag is closable */
closable?: boolean;
/** Whether tag is disabled */
disableTransitions?: boolean;
/** Whether tag is hit */
hit?: boolean;
/** Tag color */
color?: string;
/** Tag size */
size?: ComponentSize;
/** Tag effect */
effect?: 'dark' | 'light' | 'plain';
/** Whether tag is round */
round?: boolean;
}
declare const ElCheckTag: Component;
interface CheckTagProps {
/** Whether tag is checked */
checked?: boolean;
}Progress bar and circle indicators.
declare const ElProgress: Component;
interface ProgressProps {
/** Progress percentage */
percentage?: number;
/** Progress type */
type?: 'line' | 'circle' | 'dashboard';
/** Stroke width */
strokeWidth?: number;
/** Text inside progress */
textInside?: boolean;
/** Progress status */
status?: '' | 'success' | 'exception' | 'warning';
/** Whether to show text */
showText?: boolean;
/** Stroke line cap */
strokeLinecap?: 'butt' | 'round' | 'square';
/** Format text function */
format?: (percentage: number) => string;
/** Progress color */
color?: string | string[] | { color: string; percentage: number }[];
/** Circle width */
width?: number;
/** Whether progress is indeterminate */
indeterminate?: boolean;
/** Indeterminate duration */
duration?: number;
}type ComponentSize = '' | 'large' | 'default' | 'small';
interface Component {
name?: string;
props?: Record<string, any>;
emits?: string[] | Record<string, any>;
setup?: Function;
}