ele easy table

ele-easy-table

Install

 npm install ele-easy-table -S

introduce

 import 'ele-easy-table'

code demo

 <ele-easy-table :form="form" :table="table" :formData.sync="formData" @getList="handleSearch"></ele-easy-table>

See demo source code for details

Notice

Depends on element-ui, your project must install element-ui

Element-ui version used by source code

 "element-ui": "^2.4.5"

API

Props

property	illustrate	type	default value
form	Table query condition area	Object	{}
table	Table display area	Object	{}
formData.sync	form query fields	Object	{}
pagination	Whether to display the paging area	[Boolean,Object]	true
other attributes	el-table native properties	Refer to el-table native properties	-

• form sub-configuration item

property	illustrate	type	default value	Remark
class	Table query condition area style setting	Object	-	-
style	Table query condition area inline style setting	Object	-	-
foldNum	Table collapses when there are more than many query conditions	Number	-	Without this parameter, all will be displayed
list	Table query condition list	Array	-	See demo source code for details

• table sub-configuration item

property	illustrate	type	default value	Remark
list	Table data list	Array	-	-
columns	Table header list	Array	-	See demo source code for details
isLoading	Whether to display table loading animation	Boolean	-
showIndex	Whether to display the serial number column	Boolean	true
indexFixed	Whether to fix the serial number column	Boolean	false
indexLabel	Customize the header text of the serial number list	String	serial number
selection	Form multiple selection configuration	Object	{}

• selection sub-configuration item

property	illustrate	type	default value	Remark
config	Form multiple selection properties	Object	-	-

• pagination sub-configuration item

el-pagination native attribute

Methods

@getList()

Executed when the page number is switched or the number displayed on each page changes, the data is obtained, and then assigned to table.list to update the list.

other element table events

el-table native events, for example: @selection-change="handleSelectionChange" See demo source code for details

History

v1.1.3

• 1. Added table multi-select configuration
• 2. Use v-bind="$attrs" v-on="$listeners" to transplant el-table native attributes
• For details on how to use it, see ele-easy-table-demo

v1.1.4

• el-pagination component adds native configuration items

v1.1.5

• Add custom header content

v1.1.6

• Table serial number display condition optimization

v1.1.7

• Added input box to support enter key query form

v1.1.8

• Fix table serial number display bug

v1.1.9

• Fixed a bug in displaying table serial numbers when there is no page turning.

v1.2.0

• Query conditions support folding

v1.2.1

• Slot type query conditions support configuration of whether to fold or not

v1.2.2

• The table handleClick event supports the second parameter scope, which can obtain data of row, column, $index and store (state management inside the table). For usage, please refer to the demo source code.

v1.2.3

• Added handleExpand event (callback event after conditional folding)

event	illustrate	parameter
handleExpand	Callback event after conditional folding	isExpand

• The table has a new inline style overflow: visible; to implement sticky layout of the table header, just add the following style

  Note: If it is a scoped style, you need to use the >>> operator (see the document CSS scope for details)

   /* 全局样式 */
  . el-table__header-wrapper {
    position : sticky;
    top : 0 ;
    z-index : 999 ;
  }
  /* scoped 局部样式 */
  . ele-easy-table-demo > > > . el-table__header-wrapper {
    position : sticky;
    top : 0 ;
    z-index : 999 ;
  }

  See demo source code for details

  Note: It cannot be used with column fixation at the same time. To use it at the same time, you can use the element native table attribute to set the table height. There is no need to set this style.

v1.2.4

• Query conditions support configuring placeholder

v1.2.5

• Custom events are named using kebab-case instead. For details, see vuejs official website-custom event#event name

v1.2.6

• el-form and el-form-item support native configuration items

v1.2.7

• The query condition button supports dynamic configuration disabled

v1.2.8

• Query condition button supports dynamic configuration of display text