基於ElementUI 開發的表頭自定義篩選器表格組件dg-table(最新版)

dg-table

項目介紹

項目github

基於ElementUI 開發的強大表頭篩選器的表格，同時提供用戶自定義篩選器
默認提供的篩選器：

• 級聯篩選
• 日期篩選
  

除了以上2種默認的篩選器外還提供開發者自定義篩選器，在自定義編寫的組件裏面，按照制定規則傳輸數據便可。 可與el-table自己的篩選器並存，簡單的說就是在支持el-table所有功能的基礎上，添加了自定義篩選器的功能。

新版較上一個版本大大提升了靈活度，舊版配置項較多，封裝太死，只提供了部分el-table的配置項，而新版支持所有el-table的配置。 去掉了篩選條件欄，分頁器，這徹底能夠由開發者本身編寫。

配置項參考下面的表格

demo

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

使用

能夠經過npm安裝或者yarn

npm i dg-table
複製代碼

因爲是基於 ElementUI編寫的因此要確保引入ElementUI相關組件

具體代碼部分移步到這裏

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

---

表格屬性

參數	說明	類型	可選值	默認值
參照 el-table 所有屬性（用法如出一轍）	參照 el-table 屬性說明	-	-	-
configs	列的配置項 ，用於配置列的表頭，列的表現，跟咱們使用el-table-column同樣幾列就幾個配置項，具體查看下錶 configs說明	Array	-	-
tableId	設置表格id，用於在同一個頁面使用一個以上的 dg-table 時候來區分表格，大於一個表格的時候必填且必須惟一	String	-	-

configs 中每列的配置說明

參數	說明	類型	可選值	默認值
columnConfig	這個就是用來配置列的屬性，平時怎麼配置el-table-column 這裏面的屬性就怎麼寫，由於他是支持el-table-column的所有屬性（具體參照el-table-column的屬性）。要注意的是，日常在el-table-column要開啓某個功能的時候直接寫上配置的屬性名字就能夠，可是這裏面要按照鍵值對的形式 例如<el-table-column sortable></el-table-column> 在配置項中則是sortable: true	Object	-	null
component	自定義列，在自定義列中能夠經過props接受傳過去的row和column，若是在自定義列中有監聽click等事件能夠經過.stop修飾符防止冒泡致使父元素及祖先元素觸發click等事件，沒有自定義列則使用默認的	Component	-	null
filterConfig	該列篩選器的配置，具體參看下表filterConfig說明	Object	-	null

filterConfig說明

參數	說明	類型	可選值	默認值
type	篩選器的類型，默認提供兩種選擇器date和cascader，這兩種默認的樣式是寫死的，若是要自定義這兩種篩選器的樣式，對於type日期篩選器仍是date，級聯仍是cascader，至於自定義的組件怎麼寫代碼部分會介紹。若是要編寫除了這兩種類型的篩選器type值則爲custom，自定義組件編寫代碼部分也會介紹	String	date cascader custom	-
component	對應自定義篩選器的組件，具體編寫代碼部分會介紹	Component	-	null
props	在默認的級聯篩選器中要配置el-cascader中的options 和props屬性則要經過這個配置項來配置，配置項中的data對應的是el-cascader中的options，配置項中的myprops則對應的是props，具體內容參照el-cascader屬性。還能夠用於額外的數據傳給自定義的篩選器，篩選器中經過自定義組件的props中的config來獲取配置數據	Object	-	-

表格事件

事件名	說明	參數
參照el-table的所有事件	參照el-table事件說明	-
filter-change	篩選條件改變時觸發， 回調函數中會收到來自篩選器傳來的數據，其中value就是對應要的值，key則是對應該列的prop值，label用於好比單選，多選這些一個值對應一個標籤的文本內容，級聯篩選器就有label值	res

帶你擼ElementUI + dg-table 簡單的dg-table組件使用

dg-table舊版地址 再也不維護