1
功能
00:22
使用 vue3 + element-plus 封装了一个查询控件，专为管理后台量身打造，支持各种查询需求：
- 多种查询方式
- 快捷查询
- 更多查询
- 自定义查询
- 支持防抖
- 清空每个查询条件
- 依赖 json 动态创建
有些控件自带清空功能，有些没有自带清空功能，那么就需求我们手动加上清空的功能。
2
技术栈
- Vite2
- Vue3
- element-plus
3
查询控件设计
00:22
【自我感觉良好的一个脑图】
4
在线演示
https://naturefw.gitee.io/nf-vue-cdn/elecontrol/
进入页面后请点击“查询控件”。可以在“表单控件”里面添加测试数据，数据会存入webSQL。受限于webSQL，有些查询功能无法实现。
5
功能演示
查询功能具体是什么样子呢？我们先来看一段视频：【视频演示】
6
各种查询方式
查询控件针对不同的数据类型（后端数据库字段类型），量身打造了多种查询方式，让查询更便捷！
文本
文本类的查询
针对文本类的数据类型（varchar、text等），提供常用的模糊查询（包含）、精确查询（=），还有起始于、结束于等查询方式可供选择。这样用户可以更灵活方便的进行查询操作。
数字
数字查询
针对数值类型（int、float、decme等），提供常用的精确查询（=）、范围查询（从xx到xxx）还有大于等于等查询方式。
单选组的查询
单选组
单选组的多选
针对枚举类型，int 或者 varchar 等有限数量。
单选组有两种情况，一个是常见的查询一种情况即可，选择第一选项那么只需要显示第一个选项对应的数据。另一个就是想同时看多个选项的结果，那么这时候还用单选组的方式就不适合了，需要变成多选组的方式，这样才可以让用户选择多个选项。
所以这里的单选的查询支持两种查询方式：
- =：只能查询一个选项，对应单选。
- 包含：可以同时查询多个选项，对应多选。
支持清空查询条件，即点击右侧的“x”。多选支持防抖。
勾选和开关
勾选和开关
二者对应的数据类型是 bool 型的（bit），所以只有“=”这一种查询方式，增加了一个“清空”的按钮，这样可以单独清掉查询条件。
级联选择
联动下拉
常见的级联选择是省市区县的选择，组件默认给的model是一个数组形式，有多少级就会有多少个数组。
但是在后端数据库里面，往往会分成多个字段来存放，比如省份用一个字段表示，城市用一个字段表示，区县又是一个字段表示。
那么我们在查询的时候，就需要把查询结果按照字段给拆分开，这样才便于查询。
所以这里把查询结果按照字段拆分开然后在返回给后端，比如这样：{ "a": [ 401, "zhinan" ], "b": [ 401, "shejiyuanze" ], "c": [ 401, "yizhi" ] }
日期
日期查询比较复杂，这里对应的数据类型是date，选择后返回的数据是“2021-05-20”的形式。然后就是如何让用户感觉爽的问题了。
- 常规查询方式
日期查询
一般都是如上图所示，直接选择日期范围，这个看起来似乎没有啥问题，可以选择任意日期。
但是如果用户想查询2021年1月到2021年3月的数据，那么用户的操作就会比较繁琐。我们来看看一共要点击几次鼠标？打开日期栏 》 找到一月份（n次） 》 选择一号 》 找到三月份（又是n次） 》选择31号。整个流程需要点好多次鼠标，实在是太麻烦了。
- 通过月份查询日期范围 如果可以直接选择月份呢？像这样：
通过月份选择日期
如果用户想选择多个月份的日期，可以通过“从” + “年月”的形式，选择起始月份即可，返回的数据是"2021-01-01", "2021-03-31" 的形式。
选择一个月的范围
如果客户想选择一个月的范围，那么可以用“=” + “年月”的方式来选择（如上图），返回的数据是"2021-02-01", "2021-02-28" 的形式。
这样用户就非常方便了，节省了n次鼠标点击。不过这还没有结束，还有选择“年”的情况。
- 通过年查询日期范围 如果要查询一年的或者多年的日期范围呢？我们可以选择“年”的方式。
选择一整年的方式
