Vue implements dynamic query rule generation component
1. Dynamic query rules The dynamic query rules are roughly as shown in the figure below. It is a complex component that can organize query statements according to user customization, and can roughly implement the where condition of SQL query. The following is an excerpt from a certain software of mongodb.
2. Component construction ideasAccording to the organizational form of rule components, it can be regarded as a tree with a trunk and leaves, which does not seem difficult. 2.1 Component attribute data: is the content of the tree structure, which we define as:
{
condition: 'AND',
rules: [],
}
fieldList: field list array, a collection of fields available for selection; operatorList: An array of operation lists, a set of optional operations, defined as follows:
{
label: 'include',
value: '⊂',
},
2.2 Component HTML ElementUI is used here to build it, so you can easily combine various UI controls to build the required interface.
<template>
<div class="rules-group-container">
<div class="rules-group-header">
<el-radio-group v-model="data.condition" size="mini">
<el-radio-button label="AND"></el-radio-button>
<el-radio-button label="OR"></el-radio-button>
</el-radio-group>
<div>
<el-button size="mini" @click="addRule(data)">Add rule</el-button>
<el-button size="mini" @click="addGroup(data)">Add group</el-button>
<el-button v-if="parent" size="mini" @click="delGroup(data, parent)">Delete</el-button>
</div>
</div>
<div class="rules-group-body">
<div class="rules-list">
<template v-for="(rule, index) in data.rules">
<div :key="index" v-if="!rule.condition" class="rule-container">
<!-- Fields -->
<wt-dropdown
class="rule-item"
v-model="rule.FilterField"
:data="getFieldList(rule.FilterTable)"
@change="handleFieldChange(rule)"
></wt-dropdown>
<!-- Operator -->
<wt-dropdown
class="rule-item"
v-model="rule.Operator"
:disabled="inputStatus && rule.FilterField === 'CommunityId'"
:data="getRule(rule.FilterTable, rule.FilterField)"
></wt-dropdown>
<!-- Value -->
<wt-multi-dropdown
class="rule-item-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)">Delete</el-button>
</div>
<CreateRule
:key="index"
v-else
:data="rule"
:parent="data"
:fieldList="fieldList"
:operatorList="operatorList"
></CreateRule>
</template>
</div>
</div>
</div>
</template>
2.3 Define different conditions for fields of different data types
const rules = {
string: [
{
value: '==',
label: 'equal to',
},
{
value: '<>',
label: 'not equal',
},
{
value: '⊂',
label: 'include',
},
{
value: '⊄',
label: 'does not contain',
},
{
value: 'in',
label: 'One of them',
},
{
value: 'ni',
label: 'Not one of them',
},
{
value: 'mc',
label: 'Multiple inclusions',
},
],
number: [
{
value: '==',
label: 'equal to',
},
{
value: '<>',
label: 'not equal',
},
{
value: '≥',
label: 'greater than or equal to',
},
{
value: '≤',
label: 'less than or equal to',
},
],
dict: [
{
value: 'in',
label: 'One of them',
},
{
value: 'ni',
label: 'Not one of them',
},
],
date: [
{
value: 'sdiff',
label: 'A few days ago',
},
{
value: 'ediff',
label: 'A few days later',
},
],
}
2.4 Define method operation groups\rulesThe main operations involve adding\deleting groups and rules .
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
},
// Add rules addRule(data) {
let rule = {
type: 'Text',
FilterTable: this.firstTable,
FilterField: this.firstField,
Operator: '==',
FilterValue: '',
}
data.rules.push(rule)
},
// Delete rule delRule(index) {
this.data.rules.splice(index, 1)
},
// Add group addGroup(data) {
let group = {
condition: 'OR',
rules:
{
type: 'Text',
FilterTable: this.firstTable,
FilterField: '',
Operator: '',
FilterValue: '',
},
],
}
data.rules.push(group)
},
// Delete group delGroup(data, parent) {
let index = parent.rules.findIndex((item) => item === data)
parent.rules.splice(index, 1)
},
2.5 Define component name The component is named
export default {
name: 'CreateRule',
props: {
parent: {
type: Object,
},
data: {
type: Object,
},
fieldList: {
type: Array,
default() {
return []
},
},
operatorList: {
type: Array,
default() {
return []
},
},
},
}
3. Use componentsTo use components in Vue, just reference them and add them to the component list.
import CreateRule from './CreateRule'
export default {
name: 'NewRuleForm',
components:
CreateRule,
},
}
Add references to templates
<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. Effect display This is the actual effect of interception.
In the interface, it works well as a search criterion or a filter criterion and can be very flexible. 5. Summary In the development of Vue applications, we can refer to some interfaces of Windows software, which can occasionally give us great inspiration and enlightenment. This is the end of this article about Vue's implementation of dynamic query rule generation components. For more relevant Vue dynamic query rule generation component content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: Detailed explanation of how to use Docker-Compose commands
>>: Summary of how to modify the root password in MySQL 5.7 and MySQL 8.0
Recommend
Detailed steps for installing JDK and Tomcat on Linux cloud server (recommended)
Download and install JDK Step 1: First download t...
Knowledge about MySQL Memory storage engine
Knowledge points about Memory storage engine The ...
A designer complains about Hammer's official website again
Last year, the open letter was a huge hit, even a...
Solution to MySQL connection exception and error 10061
MySQL is a relational database management system ...
Use Javascript to implement the function of sending SMS verification code interval
In many apps and websites, when we log in or regi...
Detailed explanation of the spacing problem between img tags
IMG tag basic analysis In HTML5, the img tag has ...
How to use Chrome Dev Tools to analyze page performance (front-end performance optimization)
background We often use Chrome Dev Tools for deve...
Detailed explanation of the execution order of JavaScript Alert function
Table of contents question analyze solve Replace ...
Design and implementation of Vue cascading drop-down box
Table of contents 1. Database design 2. Front-end...
How to install and modify the initial password of mysql5.7.18 under Centos7.3
This article shares with you the installation of ...
Detailed explanation of the difference between a href=# and a href=javascript:void(0)
a href="#"> After clicking the link, ...
One minute to experience the smoothness of html+vue+element-ui
Technology Fan html web page, you must know vue f...
How to completely uninstall node and npm on mac
npm uninstall sudo npm uninstall npm -g If you en...
Installation and configuration tutorial of MongoDB under Linux
MongoDB Installation Choose to install using Yum ...
Detailed explanation of JavaScript's Set data structure
Table of contents 1. What is Set 2. Set Construct...