我是靠谱客的博主 傻傻大门，最近开发中收集的这篇文章主要介绍基于ElementUI + Vue3.0 开发的表头带有多种筛选器表格组件（开发者可自定义筛选器）...dg-table，觉得挺不错的，现在分享给大家，希望可以做个参考。
概述
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组件使用
最后
以上就是傻傻大门为你收集整理的基于ElementUI + Vue3.0 开发的表头带有多种筛选器表格组件（开发者可自定义筛选器）...dg-table的全部内容，希望文章能够帮你解决基于ElementUI + Vue3.0 开发的表头带有多种筛选器表格组件（开发者可自定义筛选器）...dg-table所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复