Vue组件定制——动态查询规则生成组件

已于 2022-12-23 09:38:54 修改
阅读量7.2k 收藏 37
点赞数 24
分类专栏： vue入门 文章标签： 新星计划 vue 动态搜索 动态条件 组件化
于 2021-05-25 10:50:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/codeex/article/details/117250003
版权
本文介绍了如何构建一个动态查询规则组件，该组件允许用户自定义查询条件，类似SQL的WHERE子句。组件以树结构组织，具备添加、删除组和规则的功能。使用ElementUI进行界面构建，并作为递归组件实现。在Vue应用中，该组件可以作为搜索或过滤条件，提供灵活的查询体验。
摘要由CSDN通过智能技术生成

1. 动态查询规则

动态查询规则，大致如下图所示。是可以按照用户的自定义进行组织查询语句的一种复杂组件，大致可以实现SQL查询的where条件，下面是摘自mongodb的某一软件。
在这里插入图片描述

2.组件构建思路

按照规则组件的组织形式，可以把其视为一棵树，有树干和树叶，这样看起来就不难了。

2.1 组件属性

  • data： 是树结构的内容，我们定义为：
{
   
condition: 'AND',
rules
了解本专栏 订阅专栏 解锁全文 超级会员免费看
webmote
关注
专栏目录
订阅专栏
vue组件化开发——动态组件
weixin_47450807的博客
02-10 1135
一、案例引入 我们在引入动态组件的时候，首先先看一个例子：如图所示 我们想要实现上面点击button按钮实现tab栏切换，可以通过如下两种方式： 第一个是使用v-if进行判断,代码如图所示： 我们通过一个变量当前的值是否为某一个字符串，来确定是否需要展示某一个组件。但是明显存在一个缺点就是代码过于繁琐。 第二个方法:采用动态组件的形式 动态组件component是一个全局注册的组件，其中存在一个属性为is,值为组件名，并且兼容大小写。 二、参数传入 如果想要在component上向某一个组件上传递属
2024年前端最全Vue组件定制——动态查询规则生成组件_query bulider vue，2024年最新binder 面试
2401_84619342的博客
05-12 724
中年危机是真实存在的，即便有技术傍身，还是难免对自己的生存能力产生质疑和焦虑，这些年职业发展，一直在寻求消除焦虑的依靠。技术要深入到什么程度？做久了技术总要转型管理？我能做什么，我想做什么？一技之长，就是深耕你的专业技能，你的专业技术。（重点）独立做事，当你的一技之长达到一定深度的时候，需要开始思考如何独立做事。（创业）拥有事业，选择一份使命，带领团队实现它。（创业）一技之长分五个层次栈内技术 - 是指你的前端专业领域技术栈外技术 - 是指栈内技术的上下游，领域外的相关专业知识。
vue+element-ui的列表查询条件/筛选条件太多以下拉选择方式动态添加条件（支持全选、反选、清空）
最新发布
wocwin的博客
07-30 782
vue+element-ui的列表查询条件/筛选条件太多以下拉选择方式动态添加条件（支持全选、反选、清空）
Vue动态查询条件-Vue动态查询规则-Vue多条件分组组合查询-递归组件(一):前端
热门推荐
duanjunkaisky的专栏
04-28 1万+
下面单独抠出来的demo，直接复制到项目中就可以使用的页面哈，有些小伙伴报错了不知道咋处理，上面都说过了，我还是帮你们改好吧。最近项目上有一个需求，VUE动态SQL查询组件
Vue动态查询条件-Vue动态查询规则-Vue多条件分组组合查询-递归组件(二):后端
duanjunkaisky的专栏
08-12 3987
接着给大家奉献后端的处理哈第一讲里面可以获取到查询的数据集 conditionList，另外还需要传 tableName 给后端。
Java动态生成组件
weixin_34013044的博客
09-21 210
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Log.v("LoginApp","输入用户姓名为：Toring");//日志记录，在控...
Vue2.0组件实现动态搜索引擎（一）
不会指弹的厨子不是好Coder
07-06 9321
从github上看到一个不错的开源项目：https://github.com/lavyun/vue-demo-search， 自己琢磨着不看代码做了一遍学习了不少，现将碰到的坑与填坑过程分享出来。 首先看一下demo的界面： 简单来说就是一个复刻各大搜索引擎的功能，用户输入关键字能出现搜索建议并上下键控制输入框内容。 同时点击上方logo能够
VUE ElementUI动态生成新组件并校验
奇点
05-22 1452
需求：使用ElementUI动态生成下面这个input 组件，并对其进行合法校验 废话少说 直接上实现代码： HTML代码 <el-form:model="form"ref="form"label-width="80px":label-position="'right'"> <divv-for="(item,index)inform.targetIds":key="index"> ...
ngQuery:用于动态创建查询的角度组件
06-10
# 查询 ## 描述 ngQuery 是 angular 的可视化组件，允许您构建查询。 必须提供可以选择选项的数据以及保存查询的能力。 该指令纯粹是视觉的。 ## 入门 要构建项目，只需运行gulp 。 这将捆绑 js 和模板，转译 sass 并创建“dist”目录。 ## 查询选项 待定 ## 查询输出 待定
动态生成常用组件
weixin_33712881的博客
06-23 56
1.ImageView ImageViewimageView=newImageView(this); imageView.setLayoutParams(newLayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT)); 转载于:https://www.cnblogs.com/sangxiang/p/459...
vue 创建动态组件
学习记录
12-21 2703
动态组件：官网介绍 通过使用保留的 <component> 元素，动态地绑定到它的 is 特性，我们让多个组件可以使用同一个挂载点，并动态切换。根据 v-bind:is="组件名" 中的组件名去自动匹配组件，如果匹配不到则不显示。改变挂载的组件，只需要修改is指令的值即可。 父组件就可以通过is方法，在一个挂载点上动态的切换多个子组件 父组件 <template> <!-- 动态组件 --> <div class="dynamicCom
VUE element-ui实现表格动态展示、动态删减列、动态排序、动态搜索条件配置、表单组件化。
askuld的博客
01-11 2523
2、本组件支持列表列排序，vuedraggable是拖拽插件，上图中字段管理里的拖拽效果 ，需要的话请自行npm install。1、本组件支持列表的表头自定义配置，checkbox实现。3、本组件支持查询条件动态配置，穿梭框实现。
Vue 动态组件
不知名人士的博客
06-24 197
当我们在一开始的input框输入一些内容后，点击切换按钮切换组件，再点击一次按钮回来，会发现input框中的内容没有了 😒。假设现在有这么个需求：一开始只展示子组件。，同时增加一个按钮，点击就切换成子组件。，再点击又切换回来。效果和前面是一模一样的~再点击也能切换得回去~
vue中的动态组件
webchang的博客
01-25 7522
vue中的动态组件，代码演示和讲解
vue动态组件怎么实现
weixin_42082342的博客
07-05 342
动态组件指的是动态切换组件的显示和隐藏。
vue 快速生成组件的指令_ant-design-vue表单生成组件form-create快速上手
weixin_39840729的博客
12-20 1090
介绍form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成器。并且支持生成任何 Vue 组件。结合内置17种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。安装CDN 引入NPM安装推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。npm i @form-create/ant-design-vue引入import f...
vue组件化实现原理
09-14
Vue的组件化实现原理基于Vue的核心概念——虚拟DOM（Virtual DOM）。组件化是指将页面拆分为多个独立、可复用的组件，每个组件都有自己的模板、样式和行为。Vue通过提供组件系统来支持这种开发方式。 在Vue中，我们可以使用Vue.component()方法创建一个全局组件，或者使用components选项在一个父组件中注册子组件。 当组件被创建时，Vue会根据组件的模板生成一个虚拟DOM树。在数据变化时，Vue会对比新旧虚拟DOM树的差异，并通过最小化地修改真实DOM来更新页面。 组件的模板通常使用Vue的模板语法来描述，包括插值表达式、指令、事件绑定等。当组件被渲染时，模板中的表达式会被动态地计算和更新。 组件还可以定义自己的样式和行为。样式可以使用普通的CSS或CSS预处理器编写，并通过scoped属性限定作用域，确保样式只应用于当前组件。 组件之间可以通过props属性和自定义事件进行通信。props属性用于父组件向子组件传递数据，子组件可以通过props选项声明接收的数据类型和默认值。自定义事件则用于子组件向父组件发送消息，子组件可以通过$emit方法触发事件，并传递数据给父组件。 通过组件化开发，我们可以将页面拆分为多个独立的组件，使代码更加模块化、可复用和易于维护。同时，通过虚拟DOM的高效更新机制，Vue能够在数据变化时高效地更新页面，提升性能和用户体验。
评论 98
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

webmote

如果能帮到你，请支持下博主

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值