diff --git "a/product/\347\247\273\345\212\250\344\270\216\351\200\232\344\277\241/\344\272\221\345\274\200\345\217\221\344\275\216\344\273\243\347\240\201\345\271\263\345\217\260/\346\223\215\344\275\234\346\214\207\345\215\227/\347\273\204\344\273\266/\347\273\204\344\273\266\344\270\216\346\225\260\346\215\256\350\201\224\345\212\250/\347\273\204\344\273\266\347\273\221\345\256\232\346\225\260\346\215\256.md" "b/product/\347\247\273\345\212\250\344\270\216\351\200\232\344\277\241/\344\272\221\345\274\200\345\217\221\344\275\216\344\273\243\347\240\201\345\271\263\345\217\260/\346\223\215\344\275\234\346\214\207\345\215\227/\347\273\204\344\273\266/\347\273\204\344\273\266\344\270\216\346\225\260\346\215\256\350\201\224\345\212\250/\347\273\204\344\273\266\347\273\221\345\256\232\346\225\260\346\215\256.md" index 987c97b1fbf4..074c998d4e89 100644 --- "a/product/\347\247\273\345\212\250\344\270\216\351\200\232\344\277\241/\344\272\221\345\274\200\345\217\221\344\275\216\344\273\243\347\240\201\345\271\263\345\217\260/\346\223\215\344\275\234\346\214\207\345\215\227/\347\273\204\344\273\266/\347\273\204\344\273\266\344\270\216\346\225\260\346\215\256\350\201\224\345\212\250/\347\273\204\344\273\266\347\273\221\345\256\232\346\225\260\346\215\256.md" +++ "b/product/\347\247\273\345\212\250\344\270\216\351\200\232\344\277\241/\344\272\221\345\274\200\345\217\221\344\275\216\344\273\243\347\240\201\345\271\263\345\217\260/\346\223\215\344\275\234\346\214\207\345\215\227/\347\273\204\344\273\266/\347\273\204\344\273\266\344\270\216\346\225\260\346\215\256\350\201\224\345\212\250/\347\273\204\344\273\266\347\273\221\345\256\232\346\225\260\346\215\256.md" @@ -1,90 +1,31 @@ 本文介绍一下组件如何绑定数据,实现组件属性的动态控制。 ## 功能介绍 -组件绑定的数据来源有三种: 数据容器查询的数据、变量,及其它页面传入的 URL 参数。 -## 通过数据容器获取数据实现动态控制 +组件的属性上,若有`fx`表达式图标,则该属性可绑定变量等动态数据。点击`fx`将可输入或选择数据。如输入`currentUser`,可获取当前登录用户的信息。详见[表达式使用说明](https://cloud.tencent.com/document/product/1301/86577)。 -### 什么是数据容器? +![](https://qcloudimg.tencent-cloud.cn/raw/1c6d16d83e6cac9a707492d725e35a69.png) -数据容器(Data Container)是页面与数据交互的核心组件,可直接查询数据并展示。数据容器具备**存储数据、查询数据、新增和更新数据**的能力,所提供的数据,可供所有业务组件使用。 +### 组件可使用的数据来源和类型 -### 基础功能 +组件绑定的数据来源有三种:其他组件属性值、及其它页面传入的 URL 参数、Query数据查询、自定义变量、 系统变量。通常可以在表达式的右侧面板中可见,如下图: -数据容器适用于页面与数据交互的场景,如展示用户列表、用户详情、新建订单、更新订单。如访客预约申请中,提交申请、查询不同状态的申请列表,查询申请单详情等。 -常用的数据容器有**数据列表、数据详情、数据表格、表单容器**。各组件能力如下: + - - - - - - - - - - - - - - - - - - - - - - - - - - - -
组件 - 基础能力 - 更多功能 - 使用示例 -
数据列表查询多条数据循环展示
返回数据可供容器下的任意组件使用
筛选、排序、分页
数据详情查询一条数据
返回数据可供容器下的任意组件使用
筛选、排序
表格查询多条数据、表格展示 列配置、搜索、筛选、排序、分页
表单容器 新增、更新、查看数据表单数据联动
+详细的数据来源有下列几种,可见具体的使用文档: -### 数据容器支持的数据源类型 +#### 1. 获取其他组件的属性 -目前支持的数据来源有:数据模型、APIs,后续将支持变量。 - - -调用 APIs 时,需要按照入参和出参要求设置,否则配置不生效。详细见每个数据容器组件的参数限制。 - +请参见[获取组件属性值](https://cloud.tencent.com/document/product/1301/90463)。 -### 组件如何绑定数据 -数据容器是一个数据提供器,所提供的数据,可供所有业务组件使用。具体用法如下: -1. 将需要绑定数据的组件拖入数据容器内。 -2. 单击**绑定字段**图标,即可选择数据容器的数据。 +#### 2. 通过绑定页面 URL 参数实现动态控制 -![](https://qcloudimg.tencent-cloud.cn/raw/4ac0f40c182ff8c4f6310aa430ea8cc4.png) - -### 示例 -数据容器的使用如下: -1. 添加一个数据容器。 -2. 选择数据源。 -3. 将需要绑定数据的组件拖入数据容器内,单击**绑定字段**,即可选择数据容器的数据。 -![](https://qcloudimg.tencent-cloud.cn/raw/4ac0f40c182ff8c4f6310aa430ea8cc4.png) - 如 1 分钟内快速展示一个数据列表: - ![](https://qcloudimg.tencent-cloud.cn/raw/MTY4ODg1MDUyMzIwMDY3MA_521955_gADgM4ql2roQkOhw_1666670207.gif) - - -- [数据列表组件使用示例](https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/database/ListView) -- [数据详情组件使用示例](https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/database/DataView) -- [表格组件使用示例](https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/model/ModelTable) -- [表单组件使用示例](https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/form/Form) - -## 通过绑定变量实现动态控制 +请参见 [页面跳转传参配置](https://cloud.tencent.com/document/product/1301/70204)。 -### 数据容器和变量的关系 +#### 3. 使用变量 -数据容器不仅具备存储能力,且连接展示组件和对接数据源,将数据与页面组件深度融合。简化了数据操作。因此常规的新增、更新、查询等数据交互,推荐使用数据容器。变量适用于专业开发者自定义代码时,进行数据存储。或某些需要全局变量一次存储的场景。 +请参见[自定义变量使用说明](https://cloud.tencent.com/document/product/1301/70384)。系统变量包含当前登录用户、应用、页面、设备、环境等信息。 -### 变量的使用 -请参见 [变量使用说明](https://cloud.tencent.com/document/product/1301/70384)。 +#### 4. 使用数据库查询的数据 -## 通过绑定页面 URL 参数实现动态控制 -请参见 [页面跳转传参配置](https://cloud.tencent.com/document/product/1301/70204)。 +请参见[Query数据查询](https://cloud.tencent.com/document/product/1301/93144)