关于低代码:实战-如何使用微搭低代码实现按条件过滤数据

在开发利用过程中难免会用到条件查问这个性能，本篇就来具体介绍下如何应用微搭低代码实现按条件过滤数据。

咱们在利用的会员列表中设置查问条件，依据输出的条件过滤数据，具体的成果如下图

咱们在手机的输入框中输出手机号码，点击查问按钮过滤数据，过滤后的数据如下

咱们找到会员的列表页面，减少对应的组件，咱们的思路是在容器里搁置表单输出组件和按钮组件

为了让表单输出和按钮在一行显示咱们须要设置一下容器组件的款式

按钮的话有些大，咱们设置一个高度即可

款式设置好后，咱们须要思考如何获取表单输出组件的值，这里咱们在变量治理增加一个变量

而后将该变量绑定到表单输出组件中

咱们定义一个低代码，次要的作用是在表单输出组件中输出内容时动静的扭转这个变量的值

export default function({event, data}) {$page.dataset.state.phone = event.detail.value}

而后在表单输出组件的事件页签设置 change 事件抉择为该低代码办法

这样当表单中输出内容时就能够动静的扭转变量的值了。接下来就是设置按钮的事件，同样的咱们也减少一个低代码办法

export default async function({event, data}) {
const phone = $page.dataset.state.phone
console.log(phone)
const memeber = []
if(phone!=""){
member = await app.cloud.dataSources.member.getList({phone:phone})
}else{member = await app.cloud.dataSources.member.getList()
}
$page.dataset.state.memberlist = member
}

代码的逻辑是先获取手机号码，而后调用数据库的列表办法，将手机作为参数传入，将返回后果再赋值给列表汇合变量，达到刷新及过滤数据的目标

低代码设置好后咱们给按钮减少点击事件，抉择咱们刚刚创立的低代码即可

这样性能就做好了

该教程是如何实现依据查问条件过滤数据，次要介绍了变量创立、变量赋值以及低代码办法的设置，对于没有开发根底的同学能够照着教程做，不会的中央联合官网的视频教程及 API 文档作为参考，做的多了做的纯熟了也就会了。
作者：微搭低代码布道师韩锴

腾讯云微搭低代码是高效、高性能的拖拽式低代码开发平台，向上连贯前端的行业业务，向下连贯云计算的海量能力，助力企业垂直上云。腾讯云微搭低代码将繁琐的底层架构和基础设施抽象化为图形界面，通过行业化模板、拖放式组件和可视化配置疾速构建多端利用（小程序、H5 利用、Web 利用等），免去了代码编写工作，让您可能齐全专一于业务场景。腾讯云微搭低代码以云开发作为底层撑持，云原生能力将利用搭建的全链路买通，提供高度凋谢的开发环境，且时刻为您的利用保驾护航。
开明微搭低代码：https://cloud.tencent.com/product/weda?tdl_anchor=techsite
产品文档：https://cloud.tencent.com/document/product/1301/48874?from=12763
技术交换群、最新资讯关注微信公众号【腾讯云低代码】

关于低代码:实战-如何使用微搭低代码实现按条件过滤数据

业务逻辑

具体操作

总结

产品介绍