基于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旧版地址 再也不维护