ele easy table下載 - ele easy table源碼下載

ele easy table

其他類別

1.0.0

下載

ele-easy-table

安裝

 npm install ele-easy-table -S

引入

 import 'ele-easy-table'

程式碼演示

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

詳見demo源碼

注意

依賴element-ui,你的專案必須安裝element-ui

原始碼使用的Element-ui 版本

 "element-ui": "^2.4.5"

API

Props

屬性	說明	類型	預設值
form	表格查詢條件區域	Object	{}
table	表格展示區域	Object	{}
formData.sync	表格查詢字段	Object	{}
pagination	是否顯示分頁區域	[Boolean,Object]	true
other attributes	el-table原生屬性	參考el-table原生屬性	-

form 子配置項

屬性	說明	類型	預設值	備註
class	表格查詢條件區域樣式設定	Object	-	-
style	表格查詢條件區域內聯樣式設定	Object	-	-
foldNum	表格查詢條件超過多少個時折疊	Number	-	無此參數則全部展示
list	表格查詢條件列表	Array	-	詳見demo源碼

table 子配置項

屬性	說明	類型	預設值	備註
list	表格資料列表	Array	-	-
columns	表格頭部列表	Array	-	詳見demo源碼
isLoading	是否顯示表格載入動畫	Boolean	-
showIndex	是否顯示序號列	Boolean	true
indexFixed	是否固定序號列	Boolean	false
indexLabel	自訂序號列表頭文字	String	序號
selection	表格多選配置	Object	{}

selection 子配置項

屬性	說明	類型	預設值	備註
config	表格多選屬性	Object	-	-

pagination 子配置項

el-pagination原生屬性

Methods

@getList()

頁碼切換或每頁顯示數目變更時執行，取得數據，然後賦值給table.list 更新列表

other element table events

el-table原生事件，例如：@selection-change="handleSelectionChange" 詳見demo原始碼

History

v1.1.3

1.新增表格多選配置
2.使用v-bind="$attrs" v-on="$listeners" 移植el-table原生屬性
使用方法詳見ele-easy-table-demo

v1.1.4

el-pagination 元件新增原生設定項

v1.1.5

新增自訂表頭內容

v1.1.6

表格序號顯示條件最佳化

v1.1.7

新增輸入框支援enter按鍵查詢表格

v1.1.8

修復表格序號顯示bug

v1.1.9

修正無翻頁情況下表格序號顯示bug

v1.2.0

查詢條件支援折疊

v1.2.1

slot類型查詢條件支援配置是否折疊

v1.2.2

表格handleClick事件支援第二個參數scope，可以取得到row, column, $index 和store（table 內部的狀態管理）的數據，用法參考demo源碼

v1.2.3

新增handleExpand 事件（條件折疊後的回調事件）

事件	說明	參數
handleExpand	條件折疊後的回調事件	isExpand

表格新增內嵌樣式overflow: visible; 實現表頭黏性佈局只需新增以下樣式即可
注意：如果是scoped 樣式需使用>>> 操作符（詳情請參閱文件CSS作用域）
```
 /* 全局样式 */
. 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 ;
}
```
詳情請見demo源碼
注意：無法與列固定同時使用，要同時使用可以用element原生表格屬性，設定表格高度，無需設定此樣式