需求背景
微搭现版本数据列表组件自身是不带搜索功能的,想实现通过搜索查询数据的功能,可以利用单行输入框组件来实现相应功能。
实践步骤
1. 在编辑器中选择数据列表组件,并配置好相应的数据模型。
![](https://qcloudimg.tencent-cloud.cn/image/document/69702f106a24817c6b27645ce6c660c5.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/69702f106a24817c6b27645ce6c660c5.png)
2. 选择单行输入组件,相应位置如下图大纲树所示,单行输入框的组件模板选择“搜索框”。
![](https://qcloudimg.tencent-cloud.cn/image/document/69f32e8484006a91be59ec667d008ec3.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/69f32e8484006a91be59ec667d008ec3.png)
3. 在数据列表组件中配置数据筛选条件。
![](https://qcloudimg.tencent-cloud.cn/image/document/ccf7ce93fa9f18a93e646291cf07b6ce.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/ccf7ce93fa9f18a93e646291cf07b6ce.png)
4. 添加数据列表筛选条件,其中条件值与单行输入框的值进行绑定,设置完成,单击右上方确定。
![](https://qcloudimg.tencent-cloud.cn/image/document/af900f9773354f270c9302939c118183.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/af900f9773354f270c9302939c118183.png)
说明:
上图条件设置仅作为参考,可以根据实际业务场景设置筛选条件。
5. 预览效果,例如在搜索栏中输入“11”,可以看到相应的查询结果。
![](https://qcloudimg.tencent-cloud.cn/image/document/7e49980f59d1b6497a7d07cd122f29d5.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/7e49980f59d1b6497a7d07cd122f29d5.png)
当搜索框输入的结果没有查询到相应的结果时:
![](https://qcloudimg.tencent-cloud.cn/image/document/81c84c89bf38e3bf606a7c283601527a.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/81c84c89bf38e3bf606a7c283601527a.png)