首页
娱乐
正文
vue类似layui的询功高级查询功能
layui的表格查询弹层，用过的询功人都知道那种爽感——点一下“高级查询”，弹出个面板，询功字段、询功条件、询功值三列排开，询功想加几行加几行，询功逻辑关系还能选AND还是询功OR。这套交互在后台管理系统里几乎成了标配，询功但到了vue生态里，询功很多组件库反而把这功能砍了，询功或做得特别简陋。询功其实用vue自己撸一个，询功比想象中简单，询功而且能做得更顺手。询功 先看最核心的交互结构。高级查询本质上就是一个“条件组”的编辑器：每行是一个完整条件，包含字段选择、操作符、输入值，行与行之间用逻辑符连接。关键点是，行数不固定，得让用户动态增删。这直接对应vue里的数组渲染——用一个`conditions`数组，每个元素存`{ field, operator, value, logic}`，模板里`v-for`循环，增删就是`push`和`splice`，思路干净利落。 但别急着写模板。真正麻烦的是“字段类型决定操作符”这层联动。比如选“创建时间”，操作符就该是“大于、小于、介于”；选“用户名”，操作符变成“包含、等于、不为空”。如果每个字段都配一套操作符列表，硬编码在组件里会越写越死。我的做法是让字段配置独立成数据源，每个字段自带`operators`数组，查询面板里字段一换，操作符列表立刻重置。这样后端加字段时，前端只需在配置里添一项，不用动组件内部逻辑。 再往下走，得处理“值输入”的多样性。普通文本输入框好办，日期范围得用两个日期选择器，下拉框得从字典接口拉选项。所以条件行的“值”部分不能写死，得根据字段类型动态渲染组件。vue的`component :is`在这里正好派上用场——字段配置里加个`valueType`属性，模板里根据它切换成`el-input`、`el-date-picker`或`el-select`。别嫌麻烦，这一步做完，查询面板才算真正“高级”起来。 还有一个容易忽略的细节：空值处理。用户可能只填了字段和操作符，值留空，这行条件到底算不算？我的规则是，值没填的行直接忽略，不传给后端。否则后端拿到`{ field: 'name', operator: 'contains', value: ''}`，SQL拼出来是`WHERE name LIKE '%%'`，等于查全表，纯属浪费带宽。所以提交前先`filter`一遍，把`value`为空的项剔除，干净。 最后说说查询结果的拼接。前端把条件数组序列化成JSON发给后端，后端再解析成SQL。这个方案比前端直接拼查询字符串更灵活——嵌套条件（比如`(A AND B) OR C`）也能表达。后端解析时递归处理，遇到`logic`为`OR`的组就加括号。别问我后端怎么写，那是另一个话题，但前端这边，只要保证提交的数据结构是清晰的树形或线性数组，后端就有得玩。 对了，还有一个偷懒小技巧。如果你不想从零画弹层，直接用`el-dialog`套个自定义表单组件就行，但记得把查询条件和表格的筛选状态同步——比如表格上方的已选条件标签，点叉能删掉对应条件，这个联动做出来，用户体验直接上一个档次。别小看这个细节，很多现成组件库就是栽在这上面，查询面板和表格状态各管各的，用起来特别别扭。