dg-table

项目地址

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

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

配置项参考下面的表格

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	-	-

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

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

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

参数	说明	类型	可选值	默认值
handler	用于提供能获取到搜索到的数据列表的函数返回值为一个promise的resolve对象	function	-	-
searchkey	用户传给获取数据列表的api参数中对象的key 例如{name: '陈某某'}中的name	string	-	-
showkey	用于在列表中要显示的字段名	string	-	-

带你撸ElementUI + Vue3.0 + dg-table 简单的dg-table组件使用