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

dg-table

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

默认提供的筛选器：

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

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

配置项参考下面的表格

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

可以通过npm安装或者yarn

npm i dg-table

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

main.js

.vue

dg-table-v2-1.png

支持el-table的展开行

el-table的筛选

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

自定义样式的日期选择器

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

自定义文本框选择器

参数	说明	类型	可选值	默认值
参照 `el-table` 全部属性（用法一模一样）	参照 `el-table` 属性说明	-	-	-
configs	列的配置项，用于配置列的表头，列的表现，跟我们使用`el-table-column`一样几列就几个配置项，具体查看下表 `configs说明`	Array	-	-
tableId	设置表格id，用于在同一个页面使用一个以上的 `dg-table` 时候来区分表格，大于一个表格的时候必填且必须唯一	String	-	-

参数	说明	类型	可选值	默认值
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

参数	说明	类型	可选值	默认值
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

最后编辑于：2019.12.30 15:57:15