API

Attributes

Attribute	Description	Type	Accepted Values	Default
fetch	A function to get remote data, it will get a object of search params as arguments, and return a promise. If it fetch is provided, will not get remote data from url.	function	-	-
type	Data source type. It has two types of 'remote' and 'local'.	string	remote, local	remote
data	Data list, only avaliable when type is 'local'	array	-	-
url	Request URL	string	-	-
method	Request method	string	get, post, delete, put	get
auto-load	Whether request remote data and show when component be created	boolean	true, false	true
headers	Request headers	object	-	-
list-field	The key to get list data from response	string	-	data.list
total-field	The key to get total count of response	string	-	data.total
params	Search params when send request to backend	object	-	-
form-options	form item settings(See Form Option Attributes below)	object	-	-
data-handler	Function as parameter of Array.map to hander list data	function	-	-
columns	Array of table column settings object. See Table column Attributes below	array	-	-
show-pagination	Whether to show pagination component, if it's false, request parameters will not contain pagination parameters(pageIndex, pageSize)	boolean	-	true
page-sizes	Options of item count per page	array	-	[20, 50, 100]
pagination-layout	Layout of pagination, elements separated with a comma	string	sizes, prev, pager, next, jumper, ->, total, slot	total, prev, pager, next, jumper, sizes
page-index-key	The key of pagination parameter of page index	string	-	pageIndex
page-size-key	The key of pagination parameter of page size	string	-	pageSize
table-style	CSS Styles which will be passed to el-table	string	-	width:100%;margin-top:20px;

PS: Also support more attributes, please refer to Element UI Table attributes。

Supported attributes of Element UI Table: stripe / border / height / max-height / fit / show-header / highlight-current-row / current-row-key / row-class-name / row-style / row-key / empty-text / default-expand-all / expand-row-keys / default-sort / tooltip-effect / show-summary / sum-text / summary-method / size.

Table column Attributes

Attribute	Description	Type	Accepted Values	Default
prop	column key value	string	-	-
label	column show value	string	-	-
width	column width	number	-	140
minWidth	min column width	number	-	-
filter	filter name, only avaliable for registed on global Vue	string	-	-
render	function to handle data, and show the return value. The function will have the element of list data as parameter	function	-	-
slotName	use slot to wrap a code block to build column content	string	-	-
type	Supported after version0.4.28. This is a supported property on Element UI Table. We try to use this property to distinguish adding slot content to column or not, so that we can support new features but keep the compabilities. Without setting this property, we will keep same behavior as the previous version, which will take certain column definitions and pass to Element UI Table Column object, and we will handle some custom functions such as render, formatter, etc. But when this property has been set with a value, we will simply pass anything from column defintion to Element UI Table Column. In this way, we can also support multi selection feature, index col feature, etc. Setting type to default will also let Element UI Table Column take over the rendering which will simply take prop from data object with filter setting considered.	string	default/selection/index/expand

PS: Also support more attributes, please refer to Element UI Table column Attribute。

Supported attributes of Element UI Table column: column-key / fixed / render-header / sortable / sort-by / sort-method / resizable / formatter / show-overflow-tooltip / align / header-align / class-name / label-class-name / selectable / reserve-selection / filters / filter-placement / filter-multiple / filter-method / filtered-value / type.

PS: Attribute formatter won't work if renderer or filter has been defined.

Form Option Attributes

Attribute	Description	Type	Accepted Values	Default
forms	Array of object about form item settings.See Form Item Attributes	array[object]	-	-
size	size of form item	string	large/small/mini	-
showResetBtn	whether to show the reset button	boolean	-	false
inline	whether the form is inline	boolean	-	false
fuzzy	whether the form support fuzzy search, global setting, only avaliable for local data	boolean	-	false
labelWidth	width of form label, and all its direct child form items will inherit this value	number	-	-
itemWidth	width of form item, and all its direct child form items will inherit this value	number	-	-
submitHandler	function to hander click event of submit button, the will receive the form object as the first argument	function	-	-
submitLoading	detemine whether the button is loading	boolean	-	-
submitBtnText	text of submit button	string	-	查询
resetBtnText	text of reset button	string	-	重置
resetBtnCallback	callback function in reset button's click event handler, will be called after resetting the search params	function	-	-

Form Item Attributes

Attribute	Description	Type	Accepted Values	Default
label	form item label value	string	-	-
prop	form item prop's key	string	-	-
fuzzy	whether form item support fuzzy search, only avaliable for local data	boolean	-	false
itemType	form item type, Recently, only input/select/date/daterange are avaliable	string	input/select/date/daterange	-
size	form item size	string	large/small/mini	-
labelWidth	width of form label	-	-
itemWidth	width of form item	number	-	-
placeholder	placeholder of form item	string	-	-
editable	whether the input is editable, only avaliable for date/daterange	boolean	true/false	true
disabled	whether the form item is disabled	boolean	true/false	false
readonly	same as readonly in native input, only avaliable for input/date/daterange	boolean	true/false	false
options	array of select options, the element of array can be string or object	[string]/[object]	-	-
selectFetch	function to get remote data for select options, the function must return a promise, and only avaliable without the attribute selectUrl	function	-	-
selectResultField	the key value of remote data, default value is result	string		-
selectResultHandler	function as parameter of Array.map to hander remote data of select options	function	-	-
selectUrl	url of remote select options	string -	-
selectMethod	method type for remote url(selectUrl)	string	get/post	-
selectParams	the params of remote url	object	-	-
valueKey	the key of select options's value attribute, only avaliable when the type of options element's is object	string	-	value
labelKey	the key of select options's label attribute, only avaliable when the type of options element's is object	string	-	label
rules	validation rules of form	object	-	-
format	a function to foramt form item value, it receive two arguments: form item value and form item key(as prop), and the function should return the formatted value	function	-	-
pickerOptions	additional options, only avaliable for date/daterange	object	-	-

Methods

Method Name	Description	Parameters
searchHandler	Research, and default reset page index to 1, set false to prevent resetting page index	resetPageIndex: boolean

Slots

Slot Name	Description
form	A form above table component to contain parameters. this slot's scope has two properties: loading: request loading of Element Loading directive; search: research function
prepend	This slot will be appended as the far lest column of the table
append	This slot will be appended as the far right column of the table

Events

Event Name	Description	Parameters
select	triggers when user clicks the checkbox in a row	selection, row
select-all	triggers when user clicks the checkbox in table header	selection
selection-change	triggers when selection changes	selection
cell-mouse-enter	triggers when hovering into a cell	row, column, cell, event
cell-mouse-leave	triggers when hovering out of a cell	row, column, cell, event
cell-click	triggers when clicking a cell	row, column, cell, event
cell-dblclick	triggers when double clicking a cell	row, column, cell, event
row-click	triggers when clicking a row	row, event, column
row-contextmenu	triggers when user right clicks on a row	row, event
row-dblclick	triggers when double clicking a row	row, event
header-click	triggers when clicking a column header	column, event
sort-change	triggers when Table's sorting changes	{ column, prop, order }
filter-change	column's key. If you need to use the filter-change event, this attribute is mandatory to identify which column is being filtered	filters
current-change	triggers when current row changes	currentRow, oldCurrentRow
header-dragend	triggers when finish dragging header	newWidth, oldWidth, column, event
expand (v1.x)	triggers when user expands or collapses a row	row, expandedRows
expand-change (v2.x)	triggers when user expands or collapses a row	row, expandedRows