基于ElementUI+Vue3.0开发的表头带有多种筛选器表格组件
（开发者可⾃定义筛选器）...
dg-table
项⽬介绍
基于ElementUI + Vue3.0 开发的强⼤表头筛选器的表格，同时提供⽤户⾃定义筛选器
默认提供的筛选器：
从服务器拉取匹配项列表
单纯的⽂本搜索
提供单选的列表
联级选择器（可⽤于地区搜索）
⽇期筛选
范围筛选
除了以上6种默认的筛选器外还提供开发者⾃定义筛选器，组件会提供⾃定义筛选器的容器，开发者不⽤另外定位筛选器位置，组件将会⾃动定位，只需要按照规定的数据格式来传输数据即可，⽬前版本为最⼩可⽤版本暂不⽀持配置ElementUI框架组件本⾝的⼤部分属性，事件以及⽅法，所以⼤部分样式是该组件写死的，后续版本将会推出对原框架属性以及事件和⽅法的配置需求
配置项参考下⾯的表格
dg-table编写的Demo
开发者可以通过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 对应列内容的字段名，可以采⽤链式字段（⽐如：）
筛选器结合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说明
参数说明类型可选值默认值
cascader
type筛选器的类型string 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
vue element admin
string--
showkey⽤于在列表中要显⽰的字段名string--表格事件
事件名说明参数filter-change筛选条件改变时触发filters select-change多选场景下勾选条件改变触发selecs page-change点击翻页页码改变触发page

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。