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

已于 2022-12-23 09:38:54 修改
阅读量7.6k 收藏 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应用中，该组件可以作为搜索或过滤条件，提供灵活的查询体验。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1. 动态查询规则

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

2.组件构建思路

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

2.1 组件属性

  • data： 是树结构的内容，我们定义为：
{
   
condition: 'AND',
rules
了解本专栏 订阅专栏 解锁全文 超级会员免费看
Vue2.0组件实现动态搜索引擎（一）
不会指弹的厨子不是好Coder
07-06 9466
从github上看到一个不错的开源项目：https://github.com/lavyun/vue-demo-search， 自己琢磨着不看代码做了一遍学习了不少，现将碰到的坑与填坑过程分享出来。 首先看一下demo的界面： 简单来说就是一个复刻各大搜索引擎的功能，用户输入关键字能出现搜索建议并上下键控制输入框内容。 同时点击上方logo能够
Vue动态查询条件-Vue动态查询规则-Vue多条件分组组合查询-递归组件(一):前端
热门推荐
duanjunkaisky的专栏
04-28 1万+
下面单独抠出来的demo，直接复制到项目中就可以使用的页面哈，有些小伙伴报错了不知道咋处理，上面都说过了，我还是帮你们改好吧。最近项目上有一个需求，VUE动态SQL查询组件
Vue动态查询条件-Vue动态查询规则-Vue多条件分组组合查询-递归组件(二):后端
duanjunkaisky的专栏
08-12 4620
接着给大家奉献后端的处理哈第一讲里面可以获取到查询的数据集 conditionList，另外还需要传 tableName 给后端。
Vue 框架组件模块之业务功能组件深入剖析(三)
最新发布
Android开发领域创作者
04-01 934
独立性：每个业务功能组件都有自己独立的功能，不依赖于其他组件的实现，可以在不同的项目或页面中复用。业务针对性：组件的设计和实现紧密围绕具体的业务需求，能够高效地解决特定的业务问题。可配置性：通过props等方式，组件可以接受外部传入的参数，实现不同的业务场景配置。在模态框组件中，通过this.$emit触发自定义事件close和confirm，通知父组件进行相应的操作。父组件通过@close和@confirm监听这些事件，并执行相应的方法。javascript// 触发 close 自定义事件。
Java动态生成组件
weixin_34013044的博客
09-21 250
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Log.v("LoginApp","输入用户姓名为：Toring");//日志记录，在控...
VUE ElementUI动态生成新组件并校验
奇点
05-22 1495
需求：使用ElementUI动态生成下面这个input 组件，并对其进行合法校验 废话少说 直接上实现代码： HTML代码 <el-form:model="form"ref="form"label-width="80px":label-position="'right'"> <divv-for="(item,index)inform.targetIds":key="index"> ...
动态生成常用组件
weixin_33712881的博客
06-23 86
1.ImageView ImageViewimageView=newImageView(this); imageView.setLayoutParams(newLayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT)); 转载于:https://www.cnblogs.com/sangxiang/p/459...
vue组件化开发——动态组件
weixin_47450807的博客
02-10 1238
一、案例引入 我们在引入动态组件的时候，首先先看一个例子：如图所示 我们想要实现上面点击button按钮实现tab栏切换，可以通过如下两种方式： 第一个是使用v-if进行判断,代码如图所示： 我们通过一个变量当前的值是否为某一个字符串，来确定是否需要展示某一个组件。但是明显存在一个缺点就是代码过于繁琐。 第二个方法:采用动态组件的形式 动态组件component是一个全局注册的组件，其中存在一个属性为is,值为组件名，并且兼容大小写。 二、参数传入 如果想要在component上向某一个组件上传递属
vue 创建动态组件
学习记录
12-21 2814
动态组件：官网介绍 通过使用保留的 <component> 元素，动态地绑定到它的 is 特性，我们让多个组件可以使用同一个挂载点，并动态切换。根据 v-bind:is="组件名" 中的组件名去自动匹配组件，如果匹配不到则不显示。改变挂载的组件，只需要修改is指令的值即可。 父组件就可以通过is方法，在一个挂载点上动态的切换多个子组件 父组件 <template> <!-- 动态组件 --> <div class="dynamicCom
ngQuery:用于动态创建查询的角度组件
06-10
# 查询 ## 描述 ngQuery 是 angular 的可视化组件，允许您构建查询。 必须提供可以选择选项的数据以及保存查询的能力。 该指令纯粹是视觉的。 ## 入门 要构建项目，只需运行gulp 。 这将捆绑 js 和模板，转译 sass 并创建“dist”目录。 ## 查询选项 待定 ## 查询输出 待定
VUE element-ui实现表格动态展示、动态删减列、动态排序、动态搜索条件配置、表单组件化。
askuld的博客
01-11 4332
2、本组件支持列表列排序，vuedraggable是拖拽插件，上图中字段管理里的拖拽效果 ，需要的话请自行npm install。1、本组件支持列表的表头自定义配置，checkbox实现。3、本组件支持查询条件动态配置，穿梭框实现。
Vue 动态组件
不知名人士的博客
06-24 235
当我们在一开始的input框输入一些内容后，点击切换按钮切换组件，再点击一次按钮回来，会发现input框中的内容没有了 😒。假设现在有这么个需求：一开始只展示子组件。，同时增加一个按钮，点击就切换成子组件。，再点击又切换回来。效果和前面是一模一样的~再点击也能切换得回去~
vue中的动态组件
webchang的博客
01-25 7588
vue中的动态组件，代码演示和讲解
vue动态组件怎么实现
weixin_42082342的博客
07-05 388
动态组件指的是动态切换组件的显示和隐藏。
vue 快速生成组件的指令_ant-design-vue表单生成组件form-create快速上手
weixin_39840729的博客
12-20 1145
介绍form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成器。并且支持生成任何 Vue 组件。结合内置17种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。安装CDN 引入NPM安装推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。npm i @form-create/ant-design-vue引入import f...
Vue动态组件
yuan
04-18 1万+
等疫情结束了，要开始爬爬山、看看海，做些不会后悔的事情 一、概念 1. 示例 组件是可复用的 Vue 实例，且带有一个名字，这里实现一个最简单的组件： 父组件： <template> <div> <h1>Father</h1> <!-- 调用子组件 --> <Son /> </div> </template> <script> // 引入子组件模块 impor..
vue2动态查询条件
章小鱼的博客
06-07 1427
vue2后台管理项目动态查询条件
vue3根据数据动态生成路由组件
01-28
### 实现基于数据的动态路由组件 在 Vue 3 中实现根据数据动态生成路由组件主要依赖于 `vue-router` 和异步组件加载功能。为了创建一个灵活且可扩展的应用程序结构，可以按照如下方法操作： #### 定义基础配置 首先，在项目中安装最新版的 `@vue/router` 包以确保获得最佳支持[^3]。 ```bash npm install @vue/router@next ``` 接着定义基本的路由设置文件（通常位于 `/src/router/index.js` 或者类似的路径下），这里会引入所有静态页面以及初始化必要的逻辑。 #### 创建动态路由映射函数 编写一段用于解析传入的数据源并将之转换成适合 `vue-router` 使用的形式的方法。假设有一个 JSON 数据作为输入，其中包含了各个模块的信息及其对应的 URL 路径。 ```javascript // src/utils/createRoutesFromData.js export function createRoutesFromData(data) { return data.map(item => ({ path: item.path, name: item.name, component: () => import(`../views/${item.component}`), // 动态导入组件 meta: item.meta || {} })); } ``` 此代码片段展示了如何遍历给定的数据集，并针对每一项返回一个新的对象数组，这些对象遵循 `vue-router` 所需的标准格式——即包含 `path`, `name`, `component` 及其他元信息字段。 #### 配置主路由器实例 最后一步是在应用程序的主要入口处调用上述辅助函数来获取最终的路由列表，并将其传递给 `createRouter()` 函数完成整个过程。 ```javascript import { createRouter, createWebHistory } from '@vue/router'; import { createRoutesFromData } from '@/utils/createRoutesFromData'; const dynamicRouteData = [ { path: '/', name: 'Home', component: 'Home' }, { path: '/about', name: 'About', component: 'About' } ]; const routes = [...createRoutesFromData(dynamicRouteData)]; const router = createRouter({ history: createWebHistory(), routes }); export default router; ``` 这段脚本首先从本地资源或远程API请求中读取了预设好的路由表；之后通过之前提到的帮助器将它们转化为实际可用的对象集合；再把结果送入至新建立起来的历史模式下的 Web Router 对象之中。 这样就实现了依据外部数据源自动生成所需路由的能力，使得开发者能够更加方便快捷地维护大型单页应用(SPA)，同时也提高了系统的灵活性和适应性。
评论 98
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

webmote

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

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

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

打赏作者

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

抵扣说明：

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

余额充值