微搭低代码实现查询功能

简介: 微搭低代码实现查询功能

我们上一节解决了用赋值变量的方法来实现条件查询,粉丝群里有小伙伴按照教程做不出来,还有的是想输入完条件,点击查询按钮再实现结果的过滤。针对上述需求,咱们就改一下,按照输入查询条件,点击按钮来实现一下功能。

搭建组件


组件的话我们还是使用表单输入组件和列表容器组件实现

变量定义


我们创建一个变量用来存放页面上输入的查询条件

查询逻辑的实现


export default function({event, data}) {
    let name = $page.widgets.id102.value
    $page.dataset.state.name = name
}

里唯一需要替换的就是id102这个值,它是你的表单输入组件的id

设置查询条件


列表容器支持查询条件的设置,按照变量绑定即可


事件绑定


最后一步的操作就是给按钮绑定点击事件,选择设置好的低码方法

总结


如果使用平台方法实现不了自己要求的,就需要写代码来控制逻辑的实现。这个时候就需要具备前端的开发能力,随着应用的深入,写代码是不可避免的,这个也是低码产品和无码产品最大的不同。

相关文章
|
数据可视化 前端开发 JavaScript
数据可视化技术的较量:D3.js与Tableau的比较与选择
在当今信息爆炸的时代,数据可视化成为了帮助我们理解和传达数据的重要工具。本文将重点对比并评估两个主流的数据可视化技术和工具,即D3.js和Tableau。我们将探讨它们的优势、适用场景以及选择的关键因素,以帮助读者在选择合适的数据可视化工具时做出明智的决策。
|
Java Spring 容器
spring之HttpInvoker
  一、HttpInvoker是常用的Java同构系统之间方法调用实现方案,是众多Spring项目中的一个子项目。顾名思义,它通过HTTP通信即可实现两个Java系统之间的远程方法调用,使得系统之间的通信如同调用本地方法一般。
2639 0
|
12月前
|
缓存 JavaScript API
Vue 3的全新Reactivity API:解锁响应式编程的力量
Vue 3引入了基于Proxy的全新响应式系统,提升了性能并带来了更强大的API。本文通过示例详细介绍了`reactive`、`ref`、`computed`、`watch`等核心API的使用方法,帮助开发者深入理解Vue 3的响应式编程。无论你是初学者还是资深开发者,都能从中受益,构建更高效的应用程序。
166 1
|
开发框架 JavaScript 前端开发
微软官方开源免费的Blazor UI组件库 - Fluent UI Blazor
微软官方开源免费的Blazor UI组件库 - Fluent UI Blazor
413 1
|
小程序 API
10行代码实现微信小程序支付功能,使用小程序云开发实现小程序支付功能(含源码)
10行代码实现微信小程序支付功能,使用小程序云开发实现小程序支付功能(含源码)
569 0
【植物大战僵尸杂交版】致敬传奇游戏玩家——一个普通人的六年坚持
【植物大战僵尸杂交版】致敬传奇游戏玩家——一个普通人的六年坚持
|
XML 设计模式 安全
Spring AOP:原理、 通知、连接点、切点、切面、表达式
Spring AOP:原理、 通知、连接点、切点、切面、表达式
Spring AOP:原理、 通知、连接点、切点、切面、表达式
|
小程序 前端开发 JavaScript
微搭低代码中的用户登录及注册
微搭低代码中的用户登录及注册
微搭低代码中的用户登录及注册
|
数据可视化 容器
微搭低代码中实现增删改查
微搭低代码中实现增删改查
微搭低代码中实现增删改查
|
关系型数据库 MySQL 应用服务中间件
docker--容器间通信 Link(单向通信)、bridge(双向通信)
docker--容器间通信 Link(单向通信)、bridge(双向通信)