表格

查看组件帮助

将鼠标放在对应的组件上，单击，可查看组件说明。

图2 查看组件说明

属性

• 数据绑定：通过建立不同类型的视图模型，将各种数据源和组件的返回值或者属性值进行关联，实现动态数据效果。
  • 值绑定：设置组件绑定的数据模型，数据模型一般有以下几种。更多介绍，请参见值绑定。
    • 自定义：由用户自定义的前端模型，可以在模型树上快速创建自定义字段。
    • 对象：由后台对象模型映射创建，支持选择字段。
    • 服务：由后台服务的出入参数模型创建，分别生成inputParam和outputParam节点。
    • 事件：由后台事件的字段映射创建，并且支持websocket刷新模型数据。
  • 属性值绑定，用于对该组件所有属性的动态设置。当某一属性被动态绑定时，以绑定值为准。更多介绍，请参见属性绑定。

事件

在事件中，显示了组件暴露出来的一些常用事件，供用户实现，来扩展组件的交互。整个页面有加载（on-load）事件，该事件在页面渲染完成后执行，可进行数据初始化操作。更多关于事件的介绍，请参见主要事件说明。

库

在库中，可配置页面需要的依赖库，扩展页面功能。库分为系统预置库和自定义库两种，更多介绍请参见如何引入第三方库。

绑定数据模型、增加查询条件、工具栏

设置组件绑定的数据模型，有自定义对象、对象、服务和事件四种，本章节以绑定模型为例进行介绍。

1. 在表格的“属性 > 数据绑定”中，单击，进入选择模型页面。
2. 在选择模型页面，单击“新增模型”。
3. 设置表格的元数据模型，模型名称设置“equipmentInstance”，来源选择“对象”，单击“下一步”。
   图3 创建对象数据模型
   

4. 在选择对象页面，选择一个提前创建好的对象，例如“HW__Equipment__CST”，“选择字段”中选择表单中需要展示的字段，单击“下一步”，单击“确定”。
5. 返回选择模型页面，勾选创建好的元数据模型，单击“确定”。

   绑定对象模型后，显示如下图所示。如果需要在每行添加行序号，可在表格的“扩展属性”中打开“行号”。

   图4 绑定数据模型后的结果列
   

6. 选中上图中“已添加列”中的任意一项，单击，调整列的显示顺序。
7. 单击上图中每个字段后的，修改列标题、是否隐藏、是否可编辑等字段属性。

   以“设备编码”为例，其属性配置如下图所示。在配置列标题时，可选择已有多语言、创建或更新多语言，此处创建的多语言会保存在租户的多语言库中。

   图5 设置“设备编码”列的属性
   

8. 为表格增加操作列。
   1. 在左侧“设计视图”中选中“表格”，单击右侧“属性 > 表格列”中的。

      

   2. 单击新建表格列，即Operation1后的。
      图6 新建列
      
   3. 在“属性配置”页面，修改“列标题”为“操作”。
   4. 在“操作按钮”中，单击“添加操作按钮”，设置“编辑”按钮的样式，如下图所示。
      图7 为操作列增加修改图标
      
   5. 在上图中单击事件图标，单击“动作列表”后的“+”号，在弹出的事件编排器右侧代码编辑区，添加如下事件代码，单击“创建”。

      //获取当前组件（即table）
      let _component = context.$component.current;
      //获取当前行row，取对象的id属性
      let rowId = _component.$attrs.row.id;
      //带着id跳转到设备详情页面
      context.$page.load('/besBaas/page#/HW__editEquipment?id='+rowId);

   6. 返回标准页面开发界面，单击页面上方的，保存页面。
   7. 按照上述操作，再次单击“添加操作按钮”，添加“删除”按钮。

      参照图7，设置按钮的“类型”为“主要按钮” 、“图标”为“android-delete”。

   8. 单击事件图标，在弹出的事件编排器右侧代码编辑区，添加如下事件代码，单击“创建”。

      //获取当前组件（即table）
      let _component = context.$component.current;
      //获取当前行
      let row = _component.$attrs.row;
      // 表格组件
      let _table = this.$component.table;
      // 删除当前行数据
      this.$dialog.confirm({
          title: '确认框',
          content: '确认是否删除？',
          okText: "确定",
          cancelText: "取消",
          onOk: () => {
              _table.doDelete([row]).then(()=>{_table.doQuery();})
          }
      })

   9. 返回标准页面开发界面，单击页面上方的，保存页面。

9. 设置工具栏区域。
   1. 在左侧“设计视图”中，选中“表格”，单击右侧“属性 > 表格区块 > 工具栏”后的“添加”。
   2. 删除上图工具栏中多余的按钮，只保留“新增行”、“保存”和“删除”按钮。
   3. 单击页面上方的，保存页面。

树形数据功能介绍

当表格中的数据有父子关系，可在表格属性中开启“树形数据”开关，并指定关联字段后，可展示出树形结构。

例如，低代码平台中存在如图8所示的数据，数据之间存在父子关系，效果需要展示成“树形数据”，如图9所示，明确层级关系。

图8 数据源

图9 树形数据

引申说明

表格组件需要以树形展示有个前提条件，即表格绑定的模型中存在取值上有父子关系的两个字段。