微搭低代码实现查询功能

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

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

搭建组件


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

变量定义


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

查询逻辑的实现


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

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

设置查询条件


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


事件绑定


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

总结


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

相关文章
|
4月前
|
存储 数据管理 数据库
CRUD操作实战:从理论到代码实现的全面解析
【7月更文挑战第4天】在软件开发领域,CRUD代表了数据管理的四个基本操作:创建(Create)、读取(Read)、更新(Update)和删除(Delete)。这四个操作构成了大多数应用程序数据交互的核心。本文将深入讲解CRUD概念,并通过一个简单的代码示例,展示如何在实际项目中实现这些操作。我们将使用Python语言结合SQLite数据库来演示,因为它们的轻量级特性和易用性非常适合教学目的。
365 2
|
JavaScript 前端开发 容器
微搭低代码实现表单打印功能
微搭低代码实现表单打印功能
|
前端开发
前端学习案例16-插入的封装1
前端学习案例16-插入的封装1
45 0
前端学习案例16-插入的封装1
|
前端开发
前端学习案例18-插入的封装3
前端学习案例18-插入的封装3
76 0
前端学习案例18-插入的封装3
|
开发工具 对象存储 Python
需求文档及代码实现
compare hdfs & oss files
118 0
|
存储 容器
利用微搭低代码实现搜索功能
利用微搭低代码实现搜索功能
利用微搭低代码实现搜索功能
|
前端开发 JavaScript 数据库
(简易)测试数据构造平台: 14 (工具列表删除功能前端)
(简易)测试数据构造平台: 14 (工具列表删除功能前端)
(简易)测试数据构造平台: 14 (工具列表删除功能前端)
|
JSON 测试技术 数据库
接口测试平台代码实现31:接口列表增删备注功能
接口测试平台代码实现31:接口列表增删备注功能
接口测试平台代码实现31:接口列表增删备注功能
|
JavaScript 前端开发 测试技术
接口测试平台代码实现24:项目列表的删除功能实现
接口测试平台代码实现24:项目列表的删除功能实现
接口测试平台代码实现24:项目列表的删除功能实现
|
存储 测试技术
接口测试平台代码实现32:接口列表备注功能
接口测试平台代码实现32:接口列表备注功能
接口测试平台代码实现32:接口列表备注功能