基于ElementUI + Vue3.0 开发的表头带有多种筛选器表格组件（开发者可自定义筛选器）...

dg-table

项目地址

项目介绍

基于ElementUI + Vue3.0 开发的强大表头筛选器的表格，同时提供用户自定义筛选器
默认提供的筛选器：

• 从服务器拉取匹配项列表
• 单纯的文本搜索
• 提供单选的列表
• 联级选择器（可用于地区搜索）
• 日期筛选
• 范围筛选
  除了以上6种默认的筛选器外还提供开发者自定义筛选器，组件会提供自定义筛选器的容器，开发者不用另外定位筛选器位置，组件将会自动定位，只需要按照规定的数据格式来传输数据即可，目前版本为最小可用版本暂不支持配置ElementUI框架组件本身的大部分属性，事件以及方法，所以大部分样式是该组件写死的，后续版本将会推出对原框架属性以及事件和方法的配置需求

配置项参考下面的表格

dg-table编写的Demo

demo地址

demo的gitee地址

开发者可以通过npm安装

npm i dg-table
复制代码

当前版本暂时没有从ElementUi中剥离使用到的组件所以使用者要先npm i element-ui 包 才能正常使用dg-table

部分截图

用法说明

<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 + Vue3.0 + dg-table 简单的dg-table组件使用