Components for presenting and organizing data including tables, trees, tags, cards, and specialized display elements for rich content presentation.
Advanced data table with sorting, filtering, selection, and customizable columns for displaying structured data.
/**
* Data table component for displaying structured data
*/
const Table = Vue.component;
interface TableProps {
data?: array;
height?: string | number;
maxHeight?: string | number;
stripe?: boolean;
border?: boolean;
size?: 'large' | 'medium' | 'small' | 'mini';
fit?: boolean;
showHeader?: boolean;
highlightCurrentRow?: boolean;
currentRowKey?: string | number;
rowClassName?: string | Function;
rowStyle?: object | Function;
cellClassName?: string | Function;
cellStyle?: object | Function;
headerRowClassName?: string | Function;
headerRowStyle?: object | Function;
headerCellClassName?: string | Function;
headerCellStyle?: object | Function;
rowKey?: string | Function;
emptyText?: string;
defaultExpandAll?: boolean;
expandRowKeys?: array;
defaultSort?: object;
tooltipEffect?: 'dark' | 'light';
showSummary?: boolean;
sumText?: string;
summaryMethod?: Function;
spanMethod?: Function;
selectOnIndeterminate?: boolean;
indent?: number;
lazy?: boolean;
load?: Function;
treeProps?: object;
}
/**
* Table column definition
*/
const TableColumn = Vue.component;
interface TableColumnProps {
type?: 'selection' | 'index' | 'expand';
index?: number | Function;
columnKey?: string;
label?: string;
prop?: string;
width?: string | number;
minWidth?: string | number;
fixed?: boolean | 'left' | 'right';
renderHeader?: Function;
sortable?: boolean | 'custom';
sortMethod?: Function;
sortBy?: string | array | Function;
sortOrders?: array;
resizable?: boolean;
formatter?: Function;
showOverflowTooltip?: boolean;
align?: 'left' | 'center' | 'right';
headerAlign?: 'left' | 'center' | 'right';
className?: string;
labelClassName?: string;
selectable?: Function;
reserveSelection?: boolean;
filters?: array;
filterPlacement?: string;
filterMultiple?: boolean;
filterMethod?: Function;
filteredValue?: array;
}Usage Examples:
// Basic table
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="Date" width="180"></el-table-column>
<el-table-column prop="name" label="Name" width="180"></el-table-column>
<el-table-column prop="address" label="Address"></el-table-column>
</el-table>
// Table with selection and operations
<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column label="Date" width="120">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column prop="name" label="Name" width="120"></el-table-column>
<el-table-column label="Operations">
<template slot-scope="scope">
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
</template>
</el-table-column>
</el-table>
// Sortable and filterable table
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="Date" sortable width="180"></el-table-column>
<el-table-column prop="name" label="Name" sortable width="180"></el-table-column>
<el-table-column
prop="tag"
label="Tag"
width="100"
:filters="[{text: 'Home', value: 'Home'}, {text: 'Office', value: 'Office'}]"
:filter-method="filterTag">
<template slot-scope="scope">
<el-tag :type="scope.row.tag === 'Home' ? 'primary' : 'success'" disable-transitions>{{scope.row.tag}}</el-tag>
</template>
</el-table-column>
</el-table>Hierarchical tree display with expand/collapse, selection, and drag-drop capabilities for representing nested data structures.
/**
* Tree component for hierarchical data display
*/
const Tree = Vue.component;
interface TreeProps {
data?: array;
emptyText?: string;
nodeKey?: string;
props?: object;
renderAfterExpand?: boolean;
load?: Function;
renderContent?: Function;
highlightCurrent?: boolean;
defaultExpandAll?: boolean;
expandOnClickNode?: boolean;
checkOnClickNode?: boolean;
autoExpandParent?: boolean;
defaultExpandedKeys?: array;
showCheckbox?: boolean;
checkStrictly?: boolean;
defaultCheckedKeys?: array;
currentNodeKey?: string | number;
filterNodeMethod?: Function;
accordion?: boolean;
indent?: number;
iconClass?: string;
lazy?: boolean;
}
// Tree data structure
interface TreeNode {
id?: string | number;
label?: string;
children?: TreeNode[];
[key: string]: any;
}
// Tree props configuration
interface TreePropsConfig {
children?: string;
label?: string;
disabled?: string;
isLeaf?: string;
}Usage Examples:
// Basic tree
<el-tree
:data="data"
:props="defaultProps"
@node-click="handleNodeClick">
</el-tree>
// Tree with checkboxes
<el-tree
:data="data"
show-checkbox
node-key="id"
:default-expanded-keys="[2, 3]"
:default-checked-keys="[5]"
:props="defaultProps">
</el-tree>
// Lazy loading tree
<el-tree
:props="props"
:load="loadNode"
lazy
show-checkbox
@check-change="handleCheckChange">
</el-tree>
// Tree with custom content
<el-tree
:data="data"
:props="defaultProps"
show-checkbox
node-key="id"
default-expand-all
:expand-on-click-node="false"
:check-on-click-node="true"
:render-content="renderContent">
</el-tree>
// Data structure
data: [{
id: 1,
label: 'Level one 1',
children: [{
id: 4,
label: 'Level two 1-1',
children: [{
id: 9,
label: 'Level three 1-1-1'
}, {
id: 10,
label: 'Level three 1-1-2'
}]
}]
}]Card container for organizing content with header, body, and customizable styling.
/**
* Card container component
*/
const Card = Vue.component;
interface CardProps {
header?: string;
bodyStyle?: object;
shadow?: 'always' | 'hover' | 'never';
}Usage Examples:
// Basic card
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>Card name</span>
<el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button>
</div>
<div v-for="o in 4" :key="o" class="text item">
{{'List item ' + o }}
</div>
</el-card>
// Simple card
<el-card shadow="hover">
<div>Card content</div>
</el-card>
// Card with image
<el-card :body-style="{ padding: '0px' }">
<img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
<div style="padding: 14px;">
<span>Yummy hamburger</span>
<div class="bottom clearfix">
<time class="time">{{ currentDate }}</time>
<el-button type="text" class="button">Operating button</el-button>
</div>
</div>
</el-card>Label tags for categorizing and marking content with different types and themes.
/**
* Tag component for labels and categories
*/
const Tag = Vue.component;
interface TagProps {
type?: 'primary' | 'success' | 'info' | 'warning' | 'danger';
closable?: boolean;
disableTransitions?: boolean;
hit?: boolean;
color?: string;
size?: 'large' | 'medium' | 'small' | 'mini';
effect?: 'dark' | 'light' | 'plain';
}Usage Examples:
// Basic tags
<el-tag>Tag 1</el-tag>
<el-tag type="success">Tag 2</el-tag>
<el-tag type="info">Tag 3</el-tag>
<el-tag type="warning">Tag 4</el-tag>
<el-tag type="danger">Tag 5</el-tag>
// Closable tags
<el-tag
v-for="tag in dynamicTags"
:key="tag"
closable
:disable-transitions="false"
@close="handleClose(tag)">
{{tag}}
</el-tag>
// Editable tags
<el-tag
:key="tag"
v-for="tag in dynamicTags"
closable
:disable-transitions="false"
@close="handleClose(tag)">
{{tag}}
</el-tag>
<el-input
class="input-new-tag"
v-if="inputVisible"
v-model="inputValue"
ref="saveTagInput"
size="small"
@keyup.enter.native="handleInputConfirm"
@blur="handleInputConfirm">
</el-input>
<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>Progress indicators for showing completion status of operations or loading states.
/**
* Progress bar component
*/
const Progress = Vue.component;
interface ProgressProps {
percentage?: number;
type?: 'line' | 'circle' | 'dashboard';
strokeWidth?: number;
textInside?: boolean;
status?: 'success' | 'exception' | 'warning';
color?: string | Function | array;
width?: number;
showText?: boolean;
strokeLinecap?: 'butt' | 'round' | 'square';
format?: Function;
}Usage Examples:
// Linear progress
<el-progress :percentage="50"></el-progress>
<el-progress :percentage="100" :format="format"></el-progress>
<el-progress :percentage="100" status="success"></el-progress>
<el-progress :percentage="100" status="warning"></el-progress>
<el-progress :percentage="50" status="exception"></el-progress>
// Circular progress
<el-progress type="circle" :percentage="75"></el-progress>
<el-progress type="circle" :percentage="100" status="success"></el-progress>
<el-progress type="circle" :percentage="70" status="warning"></el-progress>
<el-progress type="circle" :percentage="50" status="exception"></el-progress>
// Dashboard progress
<el-progress type="dashboard" :percentage="percentage" :color="colors"></el-progress>
// Custom colors
<el-progress :percentage="percentage" :color="customColor"></el-progress>Badge numbers and indicators for showing counts and status information.
/**
* Badge component for counts and indicators
*/
const Badge = Vue.component;
interface BadgeProps {
value?: string | number;
max?: number;
isDot?: boolean;
hidden?: boolean;
type?: 'primary' | 'success' | 'warning' | 'danger' | 'info';
}Usage Examples:
// Basic badge
<el-badge :value="12" class="item">
<el-button size="small">comments</el-button>
</el-badge>
<el-badge :value="3" class="item">
<el-button size="small">replies</el-button>
</el-badge>
// Dot badge
<el-badge is-dot class="item">query</el-badge>
<el-badge is-dot class="item">
<el-button class="share-button" icon="el-icon-share" type="primary"></el-button>
</el-badge>
// Max value
<el-badge :value="200" :max="99" class="item">
<el-button size="small">comments</el-button>
</el-badge>Timeline display for showing chronological sequences of events or activities.
/**
* Timeline component for chronological display
*/
const Timeline = Vue.component;
/**
* Individual timeline item
*/
const TimelineItem = Vue.component;
interface TimelineItemProps {
timestamp?: string;
hideTimestamp?: boolean;
placement?: 'top' | 'bottom';
type?: 'primary' | 'success' | 'warning' | 'danger' | 'info';
color?: string;
size?: 'large' | 'normal';
icon?: string;
}Usage Examples:
// Basic timeline
<el-timeline>
<el-timeline-item timestamp="2018/4/12" placement="top">
<el-card>
<h4>Update Github template</h4>
<p>Tom committed 2018/4/12 20:46</p>
</el-card>
</el-timeline-item>
<el-timeline-item timestamp="2018/4/3" placement="top">
<el-card>
<h4>Update Github template</h4>
<p>Tom committed 2018/4/3 20:46</p>
</el-card>
</el-timeline-item>
</el-timeline>
// Custom colors and icons
<el-timeline>
<el-timeline-item timestamp="2018/4/12" color="#0bbd87">
<p>Create a services site</p>
</el-timeline-item>
<el-timeline-item timestamp="2018/4/3" color="#e4e7ed">
<p>Solve initial network problems</p>
</el-timeline-item>
<el-timeline-item timestamp="2018/4/2" color="#f56c6c">
<p>Technical testing</p>
</el-timeline-item>
</el-timeline>Description lists for displaying detailed information in key-value pairs.
/**
* Descriptions component for structured information display
*/
const Descriptions = Vue.component;
interface DescriptionsProps {
border?: boolean;
column?: number;
direction?: 'vertical' | 'horizontal';
size?: 'large' | 'medium' | 'small' | 'mini';
title?: string;
extra?: string;
}
/**
* Individual description item
*/
const DescriptionsItem = Vue.component;
interface DescriptionsItemProps {
label?: string;
span?: number;
}Usage Examples:
// Basic descriptions
<el-descriptions title="User Info">
<el-descriptions-item label="Username">kooriookami</el-descriptions-item>
<el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
<el-descriptions-item label="Place">Suzhou</el-descriptions-item>
<el-descriptions-item label="Remarks">
<el-tag size="small">School</el-tag>
</el-descriptions-item>
<el-descriptions-item label="Address">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>
</el-descriptions>
// With border and custom layout
<el-descriptions title="User Info" :column="3" border>
<el-descriptions-item label="Username">kooriookami</el-descriptions-item>
<el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
<el-descriptions-item label="Place" :span="2">Suzhou</el-descriptions-item>
<el-descriptions-item label="Address">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>
</el-descriptions>Other specialized components for content presentation and organization.
/**
* Avatar component for user representation
*/
const Avatar = Vue.component;
interface AvatarProps {
icon?: string;
size?: 'large' | 'medium' | 'small' | number;
shape?: 'circle' | 'square';
src?: string;
srcSet?: string;
alt?: string;
fit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
}
/**
* Image component with lazy loading and error handling
*/
const Image = Vue.component;
interface ImageProps {
src?: string;
fit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
alt?: string;
referrerPolicy?: string;
lazy?: boolean;
scrollContainer?: string | HTMLElement;
previewSrcList?: array;
zIndex?: number;
}
/**
* Calendar component for date display
*/
const Calendar = Vue.component;
interface CalendarProps {
value?: Date;
range?: array;
firstDayOfWeek?: number;
}
/**
* Statistic component for displaying numbers with description
*/
const Statistic = Vue.component;
interface StatisticProps {
value?: number | string;
decimalSeparator?: string;
formatter?: Function;
groupSeparator?: string;
precision?: number;
prefix?: string;
suffix?: string;
title?: string;
valueStyle?: object;
}
/**
* Empty state component
*/
const Empty = Vue.component;
interface EmptyProps {
image?: string;
imageSize?: number;
description?: string;
}
/**
* Result component for success/error pages
*/
const Result = Vue.component;
interface ResultProps {
title?: string;
subTitle?: string;
icon?: 'success' | 'warning' | 'info' | 'error';
}