即將支援ElementUI中對<el-tag></el-tab>，<el-table></el-table>，<el-pagination></el-pagination> 全部屬性和事件的配置

dg-table

專案介紹

專案github

基於ElementUI + Vue-cli3.0 開發的強大表頭篩選器的表格，同時提供使用者自定義篩選器


預設提供的篩選器：

• 從伺服器拉取匹配項列表
• 單純的文字搜尋
• 提供單選的列表
• 聯級選擇器（可用於地區搜尋）
• 日期篩選
• 範圍篩選
  
  
  除了以上6種預設的篩選器外還提供開發者自定義篩選器，元件會提供自定義篩選器的容器，開發者不用另外定位篩選器位置，元件將會自動定位，只需要按照規定的資料格式來傳輸資料即可，目前版本為最小可用版本暫不支援配置ElementUI框架元件本身的大部分屬性，事件以及方法，所以大部分樣式是該元件寫死的，後續版本將會推出對原框架屬性以及事件和方法的配置需求

配置項參考下面的表格

dg-table編寫的Demo

demo地址

demo也已經上傳在gitee上
demo的gitee地址

開發者可以通過npm安裝

npm i dg-table

當前版本暫時沒有從ElementUi中剝離使用到的元件所以使用者要先npm i element-ui 包 才能正常使用dg-table

部分截圖（表格內容由js隨機生成的模擬資料）

用法說明

<dg-table></dg-table>

程式碼部分移步到這裡

(其中型別顯示.isVue 則為vue物件型別)

表格屬性

引數	說明	型別	可選值	預設值
data	要顯示的資料	array	-	-
selection	是否顯示多選框	boolean	-	false
pagination	是否顯示翻頁欄	boolean	-	true
page-config	翻頁的配置資料， 僅在pagination為true有效 格式為{pagenum: 1, curpage: 1} pagenum為總頁數，curpage為當前頁數	object	-	{pagenum: 1, curpage: 1}
row-click	行單擊事件所繫結的函式	function	-	() => {}
action-config	操作列（設定為最後一列） 具體請檢視action-config物件表格	object	-	-
column-config	除了操作列其他資料列配置， 具體請檢視column-config表格	array	-	-

action-config說明

引數	說明	型別	可選值	預設值
type	有三種型別 預設提供的有單個按鈕（值為'button'） 文字操作（值為'textbtn'） 自定義操作物件（值為'customize'）	string	button/textbtn/customize	-
label	要操作物件上顯示的文字 僅在非自定義操作物件時候可用	string	-	-
handler	操作物件繫結的函式 僅在非自定義操作物件時候可用	handler	-	-
width	操作列的框度	string	-	-
component	自定義操作物件元件，僅在type為customize時可用 在元件中props接收 row 當前行的資料	._isVue	-	-
handlers	自定義元件中所用到的函式， 以key：value的形式傳到自定義操作元件內部通過key引用函式	object	-	-

column-config說明

引數	說明	型別	可選值	預設值
prop	對應列內容的欄位名，可以採用鏈式欄位（比如：user.school.name） 篩選器結合prop來標識所以prop不應該存在相同的	string	-	-
label	顯示的標題	string	-	-
width	列的框度	string	-	-
extra	額外的資料可以是任何型別	object	-	-
component	自定義元件來處理列資料， 預設會向元件中傳入row該列資料和extra屬性 在元件中通過props接收	.isVue	-	-
processdata	提供資料處理的方式而非元件 預設提供 日期處理（值為'time', 處理後的格式為 YY-MM-DD） 時間處理（值為'time2', 處理後的格式為 YY-MM-DD HH:MM:SS） 還有預設的文字處理 如果prop對應的資料為空則返回 - 最後我們還提供自定義資料處理方式， 傳入一個函式 引數為row，和 prop 通過自己的處理函式後return結果	string/function	'time'/'time2'/function	-
filterConfig	對於的篩選器的配置，如果沒有則表頭不提供篩選，配置內容如下表	object	-	-

filterConfig說明

引數	說明	型別	可選值	預設值
type	篩選器的型別	string	cascader date edit radio range search 自定義型別的選擇器 值除了以上六種	-
key	篩選後返回的資料物件中對應該值的key	string	-	-
ftn	已經篩選的條件中專案名稱（在tag開頭顯示的專案名稱）	string	-	-
placeholder	文字框預設展示的文案，對帶有文字框型別的篩選器比較有用，預設選擇器中edit和search可用 自定義篩選器也可以通過props引用	string	-	請輸入內容
listinfo	在帶有列表的篩選器中，可以設定資料來源函式(下個版本中優化) 預設選擇器中search和radio用到該屬性，當然開發者自定義的篩選器中可以自定義資料結構，說明如下表	object	-	-
items	列表資料來源 在元件中對於的props為data	array	-	-
props	預設篩選器中針對 cascader 的配置， 用法和Elementui cascader的props屬性一樣, 自定義使用者可以自行構造資料	object	-	{value: 'value',label: 'label',children: 'children'}
unit	針對預設選擇器中range，單位的配置	string	-	unit
component	僅針對type為customize，使用者自定義篩選器元件	._isVue	-	-
hidebg	自定義篩選器元件的容器的背景設定，預設顯示有陰影的背景	boolean	true/false	false
customizedata	自定義篩選器需要的資料內容沒限制元件中通過props同名引用	object	-	-

針對search中filterConfig的listinfo說明(用法可參考demo)

引數	說明	型別	可選值	預設值
handler	用於提供能獲取到搜尋到的資料列表的函式 返回值為一個promise的resolve物件	function	-	-
searchkey	使用者傳給獲取資料列表的api引數中物件的key 例如{name: '陳某某'}中的name	string	-	-
showkey	用於在列表中要顯示的欄位名	string	-	-

表格事件

事件名	說明	引數
filter-change	篩選條件改變時觸發	filters
select-change	多選場景下勾選條件改變觸發	selecs
page-change	點選翻頁頁碼改變觸發	page

帶你擼ElementUI + Vue-cli3.0 + dg-table 簡單的dg-table元件使用