azdbaaaaaa / vue-data-tables

vue2.0 datatables，based on element-ui, el-table + el-pagination + filter + sort

vue-data-tables

vue2.0 DataTables, based on element-ui, el-table + el-pagination + custom filter and sort

Online demo

• Demo

• Demo Code

Install ElementUI and vue-data-tables

npm install element-ui

npm install vue-data-tables

Usage

1. import to your project as plugin.

   import ElementUI from 'element-ui'
   import 'element-ui/lib/theme-default/index.css'
   import DataTables from 'vue-data-tables'
   
   Vue.use(ElementUI)
   Vue.use(DataTables)

   If you don't want import the whole element-ui, you can just load corresponding components refer to On demand section of element-ui doc

   This lib depends on the following components:

   • el-table
   • el-table-column
   • el-row
   • el-col
   • el-input
   • el-button
   • el-pagination
   • el-checkbox
   • el-checkbox-group

2. use in your project.

   <template>
     <data-tables
       :data='tableData',    
       :tool-bar-def='toolBarDef',
       :row-action-def='rowActionsDef',
       @row-click='rowClick'>
       <el-table-column prop="flow_no"
         label="服务编号"
         sortable="custom">
       </el-table-column>
       <el-table-column
         prop="flow_no"
         label="服务编号"
         sortable="custom">
       </el-table-column>
     </data-tables>
   </template>

Attributes

Property	layer1 sub proptery	layer2 sub proptery	Desc	Type	Default values
data			The data array which will be render in the table.	Array	-
border			whether table has vertical border.	Boolean	true
stripe			whether table is striped.	Boolean	true
tableProps			an object to pass any proptery to el-table. refer to el-table proptery	Object	undefined
actions-def			Define the actions, which belongs to table.	Object	-
	width		grid(24 grids) width of actions bar. actions bar, checkbox and searchbox are in a el-row as el-cols	Number	5
	offset		offset of actions bar	Number	0
	def		Define the actions	Array	[]
		name	the ation button label text	String	-
		icon	icon of the button	String	-
		handler	handler of the click	Function	-
checkbox-filter-def			Define the checkbox filter	Object	-
	width		grid width of checkbox	Number	14
	offset		grid offset of checkbox	Number	0
	props		Indicate proptery[s] in the data which will be used to filter data by checkbox filter.	String | Array	[]
	filterFunction		customize filter function	Function	-
	def		grid offset of checkbox	Array	[]
		name	the checkbox label text	String	-
		code	the value of this checkbox stands for	String	-
search-def			Define the search box	Object	-
	show		show or hide search box	Boolean	true
	props		indicate proptery[s] in the data which will be used to filter data by search box.	Array | String	All
	width		grid width of search box	Number	5
	offset		grid offset of search box	Number	0
	filterFunction		customize filter function	Function	-
	placeholder		searchbox placeholder	String	""
action-col-fixed			Determine wether action column is fixed. left means action column fix to left, right means action column fix to right. undefined means not fix	String	undefined
row-action-def			Define the actions, which belongs to row	Array	[]
	name		the row action button text	String	-
	type		type of the button	String	text
	buttonProps		an object to pass any proptery to el-button. refer to el-button proptery	Function	-
	handler		handler of the click	Function	-
action-col-width			Define the min-width of the action column. unit: px.	String	-
col-not-row-click			indicated column[s] which can not trigger row click	String | Array	the action column
has-action-col			Determine wether show action column	Boolean	true
action-col-label			indicated the header text of the action column	String	"操作"
pagination-def			define pagination.	Object	-
	layout		refer to Elmeme Doc	String	[prev, pager, next, jumper, sizes, total]
	pageSize		refer to Elmeme Doc	Number	20
	pageSizes		refer to Elmeme Doc	Array	[20, 50, 100]
	currentPage		refer to Elmeme Doc	Number	1

For details, check the Demo and Demo Code.

Event

Event	Desc	params
row-click	Emit when row is clicked	row, event, column
selection-change	Emit when selection is changed	currentRow, oldCurrentRow
select	Emit when row is selected	selection
select-all	Emit when select-all is clicked	selection
filtered-data	Emit when filter condition changes	filteredData

For details, check the Demo and Demo Code.

Dev

# install dependencies
npm install

# serve test/play with hot reload at localhost:8080
npm run play

# serve docs with hot reload at localhost:8080
npm run dev