构建UI和访问组件属性

自定义表格组件 #

表格组件现在有来自查询的大量数据,但假设您可能希望只显示几列并隐藏其余列以获得更清晰的展示,并且您可以简单地打开属性窗口,找到这些列并切换眼睛图标。这将隐藏表中的列。现在打开表格属性窗口,仅显示以下列:

  1. Name
  2. Address
  3. City

此外,让我们通过使用容器组件来使UI更加美观。使用它,我们可以在最小的白色背景上对多个组件进行分组。为此,请执行以下步骤:

  1. 将容器组件拖放到画布上
  2. 将表格组件移动到容器组件中
  3. 此外,在表格组件的顶部添加一个文本组件以添加标题。

如下图:

image-20220420171655165

嗯,这令人印象深刻,就像你能够更新用户界面一样。接下来,让我们添加一些额外的组件,每当在表行上选择特定业务时,这些组件都将显示信息。为此,让我们首先将表格组件从Table1重命名为businessTable

添加文本组件和绑定数据 #

好的,接下来让我们添加一些文本组件。为此,您可以将文本组件拖放到画布上,并添加其关联的名称和值,如:

Name: {{businessTable.selectedRow.name}}

Address: {{businessTable.selectedRow.address}}

City: {{businessTable.selectedRow.city}}

Business ID: {{businessTable.selectedRow.business_id}}

Business Rating: {{businessTable.selectedRow.stars}}

Categories Rating: {{businessTable.selectedRow.categories}}

image-20220420173709147

在下一部分中,您将学习如何在组件中编写JS函数来创建交互式视图。您还将使用列表和图表组件根据所选业务分析评论表中的评论。

发表评论

您的电子邮箱地址不会被公开。