Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update 组件绑定数据.md #15890

Merged
merged 1 commit into from
Aug 8, 2023
Merged

Update 组件绑定数据.md #15890

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 14 additions & 73 deletions product/移动与通信/云开发低代码平台/操作指南/组件/组件与数据联动/组件绑定数据.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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数据查询、自定义变量、 系统变量。通常可以在表达式的右侧面板中可见，如下图：

数据容器适用于页面与数据交互的场景，如展示用户列表、用户详情、新建订单、更新订单。如访客预约申请中，提交申请、查询不同状态的申请列表，查询申请单详情等。
常用的数据容器有**数据列表、数据详情、数据表格、表单容器**。各组件能力如下：
<img src="https://qcloudimg.tencent-cloud.cn/raw/66c7818519843009a820e29f2825049e.png" style="width:600px"/>

<table>
<tr>
<th width="15%" >组件</td>
<th width="20%" >基础能力</td>
<th width="25%" >更多功能</td>
<th width="40%" >使用示例</td>
</tr>
<tr>
<td><a href="https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/database/ListView" >数据列表</a></td>
<td>查询多条数据循环展示<br />返回数据可供容器下的任意组件使用</td>
<td>筛选、排序、分页 </td>
<td><img src="https://qcloudimg.tencent-cloud.cn/raw/a3d9e4f884705d63640a2c9c9245fbe9.png" style="width: 200px; display: inline-block"/></td>
</tr>
<tr>
<td><a href="https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/database/DataView">数据详情</a></td>
<td>查询一条数据<br>返回数据可供容器下的任意组件使用</td>
<td>筛选、排序 </td>
<td><img src="https://qcloudimg.tencent-cloud.cn/raw/609d76871274447bdddc307b27e3ba8d.png" style="width: 200px; display: inline-block"/> </td>
</tr>
<tr>
<td><a href="https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/model/ModelTable">表格</a></td>
<td>查询多条数据、表格展示 </td>
<td>列配置、搜索、筛选、排序、分页</td>
<td><img src="https://qcloudimg.tencent-cloud.cn/raw/1acb9e2228f8c306d012e12a6ea974e9.png" style="width: 400px; display: inline-block"/></td>
</tr>
<tr>
<td><a href="https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/form/Form">表单容器</a> </td>
<td>新增、更新、查看数据</td>
<td>表单数据联动</td>
<td><img src="https://qcloudimg.tencent-cloud.cn/raw/1e90f19a0f4a55be4fa82cab5486573c.png" style="width: 200px; display: inline-block"/></td>
</tr>
</table>
详细的数据来源有下列几种，可见具体的使用文档：

### 数据容器支持的数据源类型
#### 1. 获取其他组件的属性

目前支持的数据来源有：数据模型、APIs，后续将支持变量。
<img src="https://qcloudimg.tencent-cloud.cn/raw/fd0e025f34a8277c30ade561180e4ca8.png" style="display: inline-block" />
<dx-alert infotype="notice" title="">
调用 APIs 时，需要按照入参和出参要求设置，否则配置不生效。详细见每个数据容器组件的参数限制。
</dx-alert>
请参见[获取组件属性值](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)