vue实现添加一段代码功能(Vue实现动态查询规则生成组件)
类别:编程学习 浏览量:943
时间:2022-01-26 01:21:53 vue实现添加一段代码功能
Vue实现动态查询规则生成组件1. 动态查询规则动态查询规则,大致如下图所示。是可以按照用户的自定义进行组织查询语句的一种复杂组件,大致可以实现SQL查询的where条件,下面是摘自mongodb的某一软件。
按照规则组件的组织形式,可以把其视为一棵树,有树干和树叶,这样看起来就不难了。
2.1 组件属性 data: 是树结构的内容,我们定义为:
{ condition: 'AND', rules: [], }
fieldList: 字段列表数组,可供选择的字段集合;
operatorList: 操作列表数组,可供选择的操作集合,定义如下:
{ label: '包含', value: '⊂', },
2.2 组件html
这里采用ElementUI构建,因此可以方便的组合各类ui控件来进行构建需要的界面。
当然该组件既然被看作树,因此其也是个递归组件,因此还涉及到自己调用自己。
<template> <li class="rules-group-container"> <li 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> <li> <el-button size="mini" @click="addRule(data)">添加规则</el-button> <el-button size="mini" @click="addGroup(data)">添加分组</el-button> <el-button v-if="parent" size="mini" @click="delGroup(data, parent)">删除</el-button> </li> </li> <li class="rules-group-body"> <li class="rules-list"> <template v-for="(rule, index) in data.rules"> <li :key="index" v-if="!rule.condition" class="rule-container"> <!-- 字段 --> <wt-dropdown class="rule-item" v-model="rule.FilterField" :data="getFieldList(rule.FilterTable)" @change="handleFieldChange(rule)" ></wt-dropdown> <!-- 操作符 --> <wt-dropdown class="rule-item" v-model="rule.Operator" :disabled="inputStatus && rule.FilterField === 'CommunityId'" :data="getRule(rule.FilterTable, rule.FilterField)" ></wt-dropdown> <!-- 值 --> <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)">删除</el-button> </li> <CreateRule :key="index" v-else :data="rule" :parent="data" :fieldList="fieldList" :operatorList="operatorList" ></CreateRule> </template> </li> </li> </li> </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 [] }, }, }, }
vue中使用组件只需引用并增加到组件列表中即可。
import CreateRule from './CreateRule' export default { name: 'NewRuleForm', components: { CreateRule, }, }
模板内增加引用
<template> <li class="new-rule-form"> <CreateRule v-if="!loading" :data="data" :fieldList="FilterTable" :operatorList="operatorList" ></CreateRule> <li v-if="!loading" class="discription-wrap" v-html="discription"></li> </li> </template>
这是截取的实际效果.
在界面中,作为搜索条件或过滤条件效果均不错,可以做到非常灵活。
5.小结在vue开发应用中,可以多参考下windows软件的某些界面,偶尔能给我们很大的灵感和启发的。
到此这篇关于Vue实现动态查询规则生成组件的文章就介绍到这了,更多相关Vue 动态查询规则生成组件内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- vuex数据持续化(Vuex数据持久化实现的思路与代码)
- vue找不到水印设置(Vue使用自定义指令实现页面底部加水印)
- vue虚拟滚动条(vue轻松实现虚拟滚动的示例代码)
- vue自定义组件定义事件(基于Vue实现自定义组件的方式引入图标)
- vuecli配置环境变量(Vue CLI中模式与环境变量的深入详解)
- vue指令使用技巧(Vue指令工作原理实现方法)
- vue怎么配置到idea(idea编译器vue缩进报错问题场景分析)
- vuecli打包项目(使用vue-cli创建项目并webpack打包的操作方法)
- vue组件之间的通信(超详细的vue组件间通信总结)
- google 调试vue(Vue实现Google第三方登录的示例代码)
- vue购物车简单项目(vue实现简单购物车案例)
- vue官网编辑器主题(vue实现主题切换的多种思路分享)
- vue表单上传图片数据(vue-cropper插件实现图片截取上传组件封装)
- vue实现一个tab栏(Vue实现tab导航栏并支持左右滑动功能)
- vue前端搜索功能如何实现(使用Vue3+Vant组件实现App搜索历史记录功能示例代码)
- vue加载html5动画(vue实现旋转木马动画)
- 某知名企业绩效管理体系及薪酬分配体系操作手册(某知名企业绩效管理体系及薪酬分配体系操作手册)
- 职场人改不掉这4个习惯,只会越混越穷,一辈子也翻不了身(职场人改不掉这4个习惯)
- 华为 联想等46家公司笔试面试题,涉及各行各业,建议收藏(联想等46家公司笔试面试题)
- ()
- ()
- 800壮士拼死拖住30万日军 八佰 的真实历史,誓与阵地共存亡(800壮士拼死拖住30万日军)
热门推荐
- dedecms栏目内容怎么插入分页符(dedecms自动给已经发布过的文章中的关键词加超链接)
- html5清除浮动的方法(HTML5实现移动端点击翻牌功能)
- mysqlshell日常运维脚本(监控MySQL主从状态的shell脚本)
- sqlserver2000显示无服务器(SQL SERVER 2000 9003错误的解决方法只适用于SQL2000)
- bootstrap 左右布局(详解Bootstrap网格垂直和水平对齐方式)
- sqlserverlog原理(sql server中错误日志errorlog的深入讲解)
- pythonflask编写接口(Python Flask框架模板操作实例分析)
- es6新增语法以及用法(ES6 解构赋值的原理及运用)
- Asp.net导出Excel乱码
- js的模块模式设计(如何理解JavaScript模块化)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9