1 .动态查询规则动态查询规则大致如下图所示。 一个可以根据用户定制来组织查询语句的复杂组件，可以初步实现SQL查询的where条件。 以下是摘自mongodb的软件。
2 .组件构建思路规则根据组件的组织形式，可以看作树，有树干和叶子，所以外观不难。
2.1组件属性data :是树型结构，{condition: 'AND '，rules: []，} fieldList:字段列表数组，可选字段集合； operatorList:操作列表数组，可选操作的集合。 定义如下。 {label: '包括'，value: '，}，2.2组件html在此使用ElementUI构建，因此可以简单地组合各种ui控件来构建所需的界面。
当然，既然把这个组件看作树，也是递归的组件，所以也与自己调用自己有关。
templatedivclass=' rules-group-container ' divclass=' rules-group-header ' El-radio-groupv-model=' data . El-radio-button/El-radio-groupdivel-buttonsize=' MIT ton El-button El-buttonsize=' mini ' @ click='添加组parent ('删除/El-button/div/divdivclass=' rules-group-body ' divclass=' rules-list ' template v-for=' (rules ) -字段--wt-drop down class=' rule-item ' v-model=' rule.filter field ' : data=' getfield list (rule.filtere ) rule.operator ' : disabled=' inputstatusrule.filterfieller -值--- wt-multi-drop down class=' rule-ite
m-long" v-if="rule.type === 'Dropdown'" :disabled="inputStatus && rule.FilterField === 'CommunityId'" v-model="rule.FilterValue" :data="getData(rule.FilterTable, rule.FilterField)" ></wt-multi-dropdown> <wt-number class="rule-item-long" :disabled="inputStatus && rule.FilterField === 'CommunityId'" v-else-if="['DateTime', 'Number', 'Decimal'].includes(rule.type)" v-model="rule.FilterValue" ></wt-number> <wt-text class="rule-item-long" v-else v-model="rule.FilterValue" :disabled="inputStatus && rule.FilterField === 'CommunityId'"></wt-text> <el-button size="mini" @click="delRule(index)">删除</el-button> </div> <CreateRule :key="index" v-else :data="rule" :parent="data" :fieldList="fieldList" :operatorList="operatorList" ></CreateRule> </template> </div> </div> </div></template> 2.3 对不同数据类型的字段定义不同的条件 const rules = { string: [ { value: '==', label: '等于', }, { value: '<>', label: '不等于', }, { value: '⊂', label: '包含', }, { value: '⊄', label: '不包含', }, { value: 'in', label: '其中之一', }, { value: 'ni', label: '非其中之一', }, { value: 'mc', label: '多包含', }, ], number: [ { value: '==', label: '等于', }, { value: '<>', label: '不等于', }, { value: '≥', label: '大于等于', }, { value: '≤', label: '小于等于', }, ], dict: [ { value: 'in', label: '其中之一', }, { value: 'ni', label: '非其中之一', }, ], date: [ { value: 'sdiff', label: '几天前', }, { value: 'ediff', label: '几天后', }, ],} 2.4 定义方法操作组规则主要的操作涉及到添加删除 组和规则。
getRule(table, field) { let data = (rules && rules.string) || [] let theField = this.getCurrentField(table, field) if (theField && theField.ControlType) { if (['Dropdown'].includes(theField.ControlType)) { return rules.dict } else if (['DateTime'].includes(theField.ControlType)) { return rules.date } else if (['Number', 'Decimal'].includes(theField.ControlType)) { return rules.number } else { return rules.string } } return data }, // 添加规则 addRule(data) { let rule = { type: 'Text', FilterTable: this.firstTable, FilterField: this.firstField, Operator: '==', FilterValue: '', } data.rules.push(rule) }, // 删除规则 delRule(index) { this.data.rules.splice(index, 1) }, // 添加分组 addGroup(data) { let group = { condition: 'OR', rules: [ { type: 'Text', FilterTable: this.firstTable, FilterField: '', Operator: '', FilterValue: '', }, ], } data.rules.push(group) }, // 删除分组 delGroup(data, parent) { let index = parent.rules.findIndex((item) => item === data) parent.rules.splice(index, 1) }, 2.5 定义组件名该组件命名为 CreateRule，定义代码很简单了。
export default { name: 'CreateRule', props: { parent: { type: Object, }, data: { type: Object, }, fieldList: { type: Array, default() { return [] }, }, operatorList: { type: Array, default() { return [] }, }, }, } 3.使用组件vue中使用组件只需引用并增加到组件列表中即可。
import CreateRule from './CreateRule'export default { name: 'NewRuleForm', components: { CreateRule, },}模板内增加引用
<template> <div class="new-rule-form"> <CreateRule v-if="!loading" :data="data" :fieldList="FilterTable" :operatorList="operatorList" ></CreateRule> <div v-if="!loading" class="discription-wrap" v-html="discription"></div> </div></template> 4.效果展示这是截取的实际效果.
在界面中，作为搜索条件或过滤条件效果均不错，可以做到非常灵活。
在vue开发应用中，可以多参考下windows软件的某些界面，偶尔能给我们很大的灵感和启发的。
当然，也希望本文能帮助到小伙伴们。