微搭低代码数据容器组件使用解析

本文涉及的产品
容器服务 Serverless 版 ACK Serverless,952元额度 多规格
容器镜像服务 ACR,镜像仓库100个 不限时长
容器服务 Serverless 版 ACK Serverless,317元额度 多规格
简介: 微搭低代码数据容器组件使用解析

以前低代码要实现列表功能,需要通过基础组件结合变量定义及变量绑定实现。如果需要实现分页效果的,还需自己实现分页代码。对于初学者来说,要想把分页实现明白了也不容易。

为了降低使用难度,官方最近新上线了两个组件,列表视图组件及数据视图组件,来解决列表页搭建及详情页搭建的问题。通过熟练使用组件,来提高开发效率。本文就详细介绍一下这两个组件的用法。

列表视图组件


列表视图组件通过配置数据源,设置样式模板来快速创建列表页面。往编辑器中添加列表视图组件

数据模型可以选择我们需要的数据源,模板可以选择我们需要的显示效果。如果是首页,需要卡片式效果的,可以选择卡片列表。

卡片列表加载的是默认数据,如果希望替换成具体的字段的,可以选择对应的组件,比如先选中图片组件,在属性面板上点击数据绑定

在弹出的页面里数据字段就是选中数据源的具体字段,我们可以根据需要进行选择

绑定好数据之后页面就可以看到真实的数据

除了卡片式样式外,还有图文列表

简单列表

详细列表

等几种样式,如果觉得这些样式都不符合自己的要求,可以选择不使用模板

按照自己的需求进行组件的组装即可。

除了样式模板外,列表视图组件可以设置筛选条件

可行选择查询条件的字段

设置查询条件,是相等查询,还是不相等,包含等

具体的值可以选择是常量还是变量

除了设置查询条件还可以设置排序字段、排序类型、显示条数和分页方法

熟练配置属性就可以实现大部分页面上需要的效果,还是非常方便的。


数据视图


数据视图一般用在详情页显示单条记录的具体字段信息

需要选择数据模型,筛选条件需要设置数据标识等于页面的传入参数

一般单独设置这块可能有点复杂,我们可以在列表页,设置列表字段的跳转方法

在列表页面将传入参数设置好,在详情页设置的时候直接选择参数即可


总结



低码产品也是在日新月异的发展,会逐步的将大家常用的场景提炼成组件,这样我们在开发页面的时候只需设置好数据源,做好数据绑定,并且定义好交互事件即可。至于组件的逻辑完全由低码平台承担,低码之所以可以提高开发效率就是平台承担了技术的复杂度,我们只需关注我们自身的业务逻辑即可,这也是低码最大的魅力所在。


当然了,要想学会低码开发,还是按照实际的业务不断的进行搭建,熟能生巧,慢慢的就开发效率就提高了。


相关文章
|
22天前
|
人工智能 数据可视化 前端开发
简化开发流程 低代码技术优势全解析
低代码开发通过可视化界面、预建模板和拖放操作简化开发流程,加速企业数字化转型。Zoho Creator等平台提供丰富模板、自动化工作流和第三方集成,降低开发成本,提高效率,成为未来应用开发趋势。
39 1
|
19天前
|
自然语言处理 数据可视化 前端开发
从数据提取到管理:合合信息的智能文档处理全方位解析【合合信息智能文档处理百宝箱】
合合信息的智能文档处理“百宝箱”涵盖文档解析、向量化模型、测评工具等,解决了复杂文档解析、大模型问答幻觉、文档解析效果评估、知识库搭建、多语言文档翻译等问题。通过可视化解析工具 TextIn ParseX、向量化模型 acge-embedding 和文档解析测评工具 markdown_tester,百宝箱提升了文档处理的效率和精确度,适用于多种文档格式和语言环境,助力企业实现高效的信息管理和业务支持。
3940 3
从数据提取到管理:合合信息的智能文档处理全方位解析【合合信息智能文档处理百宝箱】
|
9天前
|
存储 分布式计算 Java
存算分离与计算向数据移动:深度解析与Java实现
【11月更文挑战第10天】随着大数据时代的到来,数据量的激增给传统的数据处理架构带来了巨大的挑战。传统的“存算一体”架构,即计算资源与存储资源紧密耦合,在处理海量数据时逐渐显露出其局限性。为了应对这些挑战,存算分离(Disaggregated Storage and Compute Architecture)和计算向数据移动(Compute Moves to Data)两种架构应运而生,成为大数据处理领域的热门技术。
27 2
|
15天前
|
JavaScript API 开发工具
<大厂实战场景> ~ Flutter&鸿蒙next 解析后端返回的 HTML 数据详解
本文介绍了如何在 Flutter 中解析后端返回的 HTML 数据。首先解释了 HTML 解析的概念,然后详细介绍了使用 `http` 和 `html` 库的步骤,包括添加依赖、获取 HTML 数据、解析 HTML 内容和在 Flutter UI 中显示解析结果。通过具体的代码示例,展示了如何从 URL 获取 HTML 并提取特定信息,如链接列表。希望本文能帮助你在 Flutter 应用中更好地处理 HTML 数据。
93 1
|
17天前
|
前端开发 JavaScript 开发者
揭秘前端高手的秘密武器:深度解析递归组件与动态组件的奥妙,让你代码效率翻倍!
【10月更文挑战第23天】在Web开发中,组件化已成为主流。本文深入探讨了递归组件与动态组件的概念、应用及实现方式。递归组件通过在组件内部调用自身,适用于处理层级结构数据,如菜单和树形控件。动态组件则根据数据变化动态切换组件显示,适用于不同业务逻辑下的组件展示。通过示例,展示了这两种组件的实现方法及其在实际开发中的应用价值。
23 1
|
22天前
|
缓存 前端开发 JavaScript
前端的全栈之路Meteor篇(二):容器化开发环境下的meteor工程架构解析
本文详细介绍了使用Docker创建Meteor项目的准备工作与步骤,解析了容器化Meteor项目的目录结构,包括工程准备、环境配置、容器启动及项目架构分析。提供了最佳实践建议,适合初学者参考学习。项目代码已托管至GitCode,方便读者实践与交流。
|
26天前
|
存储 应用服务中间件 云计算
深入解析:云计算中的容器化技术——Docker实战指南
【10月更文挑战第14天】深入解析:云计算中的容器化技术——Docker实战指南
52 1
|
27天前
|
存储 JavaScript 前端开发
Vue3权限控制全攻略:路由与组件层面的用户角色与权限管理方法深度解析
Vue3权限控制全攻略:路由与组件层面的用户角色与权限管理方法深度解析
98 2
|
12天前
|
机器学习/深度学习 自然语言处理 数据管理
GraphRAG核心组件解析:图结构与检索增强生成
【10月更文挑战第28天】在当今数据科学领域,自然语言处理(NLP)和图数据管理技术的发展日新月异。GraphRAG(Graph Retrieval-Augmented Generation)作为一种结合了图结构和检索增强生成的创新方法,已经在多个应用场景中展现出巨大的潜力。作为一名数据科学家,我对GraphRAG的核心组件进行了深入研究,并在此分享我的理解和实践经验。
35 0
|
15天前
|
JSON 前端开发 JavaScript
API接口商品详情接口数据解析
商品详情接口通常用于提供特定商品的详细信息,这些信息比商品列表接口中的信息更加详细和全面。以下是一个示例的JSON数据格式,用于表示一个商品详情API接口的响应。这个示例假定API返回一个包含商品详细信息的对象。

推荐镜像

更多