微搭低代码实现查询功能

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

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

搭建组件


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

变量定义


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

查询逻辑的实现


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

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

设置查询条件


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


事件绑定


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

总结


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

相关文章
原生php实现列表接口+分页接口+排序接口组合使用+包括测试数据(不加任何封装)
原生php实现列表接口+分页接口+排序接口组合使用+包括测试数据(不加任何封装)
原生php实现列表接口+分页接口+排序接口组合使用+包括测试数据(不加任何封装)
|
5天前
|
SQL 关系型数据库 MySQL
【MySQL-8】DQL-查询语句全解 [ 基础/条件/分组/排序/分页查询 ](附带代码演示&案例练习)
【MySQL-8】DQL-查询语句全解 [ 基础/条件/分组/排序/分页查询 ](附带代码演示&案例练习)
|
5天前
|
存储 前端开发 JavaScript
网站运行原理与代码实现
网站运行原理与代码实现
22 1
|
5天前
|
存储 人工智能
哈希表基础(含代码演示)
哈希表基础(含代码演示)
21 0
|
5天前
|
分布式计算 JavaScript 前端开发
给大家讲讲过滤查询的思路(一点就通)
给大家讲讲过滤查询的思路(一点就通)
23 1
|
开发工具 对象存储 Python
需求文档及代码实现
compare hdfs & oss files
93 0
|
前端开发
前端学习案例16-插入的封装1
前端学习案例16-插入的封装1
36 0
前端学习案例16-插入的封装1
|
前端开发
前端学习案例18-插入的封装3
前端学习案例18-插入的封装3
63 0
前端学习案例18-插入的封装3
|
存储 容器
利用微搭低代码实现搜索功能
利用微搭低代码实现搜索功能
利用微搭低代码实现搜索功能
|
前端开发 JavaScript 数据库
(简易)测试数据构造平台: 14 (工具列表删除功能前端)
(简易)测试数据构造平台: 14 (工具列表删除功能前端)
(简易)测试数据构造平台: 14 (工具列表删除功能前端)