基于ElementUI 开发的表头自定义筛选器表格组件dg-table(重构版)

dg-table

项目介绍

项目github

基于ElementUI 2.9.2 及以上版本 开发的强大表头筛选器的表格，同时提供用户自定义筛选器


默认提供的筛选器：

• 级联筛选
• 日期筛选
  
  

除了以上2种默认的筛选器外还提供开发者自定义筛选器，在自定义编写的组件里面，按照制定规则传输数据即可。
可与el-table本身的筛选器并存，简单的说就是在支持el-table全部功能的基础上，添加了自定义筛选器的功能。

新版较上一个版本大大提高了灵活度，旧版配置项较多，封装太死，只提供了部分el-table的配置项，而新版支持全部el-table的配置。
去掉了筛选条件栏，分页器，这完全可以由开发者自己编写。

配置项参考下面的表格

demo

demo也已经上传在github上
demo的github地址

使用

可以通过npm安装或者yarn

npm i dg-table

由于是基于 ElementUI编写的所以要确保引入ElementUI相关组件

main.js

.vue

具体代码部分移步到这里

部分截图（表格内容由js随机生成的模拟数据）

dg-table-v2-1.png

支持el-table的展开行

el-table的筛选

级联筛选（有默认的也可以自定义样式后面将会说明）

自定义样式的日期选择器

默认提供的内置日期选择器

自定义文本框选择器

---

表格属性

参数	说明	类型	可选值	默认值
参照 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要开启某个功能的时候直接写上配置的属性名字就可以，但是这里面要按照键值对的形式 例如 在配置项中则是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旧版地址 不再维护