# 表格（新）
表格（新）为数据表格组件，主要用于展示大量的结构化数据，支持电脑端和移动端。使用时，需要先通过数据绑定来绑定数据模型，再设置表格属性。
表格（新）相对于[表格（新）](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_0700.html)中的表格组件来说，更适用于移动端，但是不支持展示树形结构。当表格中的数据有父子关系，需要展示出树形结构时，还是需要选用[表格（新）](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_0700.html)中介绍的表格组件。
在标准页面设计界面，从"基本组件 \> 布局"中，拖拽"表格（新）"组件至页面工作区域，如[图1]。
图1表格（新）   
![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001933047316.png "点击放大")
#### 查看组件帮助
将鼠标放在对应的组件上，单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960286425.png)，可查看组件说明。
图2查看组件说明   
![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960286449.png)
#### 属性
- 数据绑定：通过建立不同类型的视图模型，将各种数据源和组件的返回值或者属性值进行关联，实现动态数据效果。
  - 值绑定：设置组件绑定的数据模型，数据模型一般有以下几种。更多介绍，请参见[值绑定](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_0048.html#astrozero_05_0048__section1786195310514)。
    - 自定义：由用户自定义的前端模型，可以在模型树上快速创建自定义字段。
    
    - 对象：由后台对象模型映射创建，支持选择字段。
    
    - 服务：由后台服务的出入参数模型创建，分别生成inputParam和outputParam节点。
    
    - 事件：由后台事件的字段映射创建，并且支持websocket刷新模型数据。
     
  
  - 属性值绑定，用于对该组件所有属性的动态设置。当某一属性被动态绑定时，以绑定值为准。更多介绍，请参见[属性绑定](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_0048.html#astrozero_05_0048__section1923073313920)。
   
 
- 基本设置
  - 表头：是否显示表头。
  
  - 序号：是否显示序号列，序号累加显示。
  
  - 单选：启用后，显示单选按钮。
  
  - 多选：启用后，显示多选按钮。与属性"单选"互斥，只能勾选"单选"或"多选"的一种。
  
  - 斑马纹：是否显示间隔斑马纹。勾选后，表格会间隔显示不同颜色，用于区分不同行数据。
  
  - 自动加载：预览或加载页面时，是否自动加载数据。仅当模型为对象模型时有效，启用后，预览或加载页面时，将调用后台的对象查询接口自动加载数据，不需要通过事件触发。
  
  - 表格边框：设置表格的边框样式，支持显示完整边框、显示默认边框、显示外边框等。
  
  - 文字对齐方式：表格中，文字整体的对齐方式。
  
  - 使用模式：设置表格的使用模式，如管理模式、只读模式和勾选模式。
  
  - 数据操作页面：编辑表格中数据的方式，可以设置"链接到页面"编辑数据。设置"链接到页面"时需要配置关联的页面名称，例如配置"详情页"、"添加页"、"修改页"的页面名称。若在当前页面编辑数据，则清空"编辑数据的方式"值。
   
- 高级设置：设置项，只在PC端生效。
  - 调整列宽：是否支持拖拽调整列宽。
  
  - 表头溢出省略：当每列的表头内容超过表格当前列宽后，是否设置超过的部分为省略号。
  
  - 内容溢出省略：当每列的内容超过表格当前列宽后，是否设置超过的部分为省略号。
   
- 大小设置：设置项，只在PC端生效。
  - 尺寸：表格整体尺寸。
  
  - 表格最大高度：表格的最大高度，单位为px。
  
  - 表格固定宽度：表格的固定宽度，单位为px，为0表示不限制。
  
  - 表格固定高度：表格的固定高度，单位为px，为0表示不限制。设置后，如果表数据内容超出该高度，会自动固定表头。
   
- 查询条件：是否在表格上方，添加查询条件，快速查询数据。勾选后， 单击"新建"，可按需设置查询条件。
  图3查询条件   
  ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960126625.png "点击放大") 
- 按钮栏：设置按钮栏显示方式，如图标、文字。
- 分页栏
  - 启用分页：是否启用分页。
  
  - 风格：设置分页风格，如简洁版或完整版。
  
  - 默认分页大小：设置默认分页的大小。
  
  - 每页大小选项列表：每页显示的条数选项列表，例如\[10,20,40\]。
  
  - 分页显示位置：分页的显示位置。
   
- 操作列：单击"新建"，可在表格列配置单独的操作列，系统预置了详情、修改、删除，可根据需要进行选择。
- 表格列：表格列生成后，单击"设置"，可以进行列的配置调整。
- 公共
  - 控件名称：当前组件的名称。
  
  - 隐藏：是否隐藏该组件，此方式为静态配置该组件的隐藏。还可以将该组件属性值"隐藏"配置为布尔类型模型字段，在自定义JS代码中来控制模型字段取值，从而设置该组件是否隐藏，这种动态设置优先级是最高的。
   
#### 绑定数据模型
设置组件绑定的数据模型，有自定义对象、对象、服务和事件四种。
1. 向页面中拖入一个表格（新）组件，单击"表格"页签，在表格属性"数据绑定"中单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960126617.png)，绑定数据模型。
   
   图4数据绑定   
   ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960126629.png "点击放大")
   
   
2. 在弹出页面中，单击"新增模型"。
3. 设置表格的数据模型，添加对象模型，模型名称"equipmentInstance"，单击"下一步"。 
   图5创建数据模型   
   ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001932887912.png "点击放大")
   
   
4. "选择对象"选择一个提前创建好的对象，例如"HW__Equipment__CST"，"选择字段"中选择表单中需要展示的字段，单击"下一步"。 
   图6选择展示字段   
   ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960126633.png "点击放大")
   
   
5. 在方法页面，单击"确定"，返回选择模型页面。
6. 勾选刚建好的数据模型，单击"确定"。 
   绑定对象模型后，显示如[图7]所示。系统默认添加了斑马纹，如果不需要，可在表格属性的"基本设置"中关闭"斑马纹"。
   图7绑定数据模型后的结果列   
   ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001932887928.png "点击放大")
   
   
 
#### 事件
在事件中，显示了组件暴露出来的一些常用事件，供用户实现，来扩展组件的交互。整个页面有加载（on-load）事件，该事件在页面渲染完成后执行，可进行数据初始化操作。更多关于事件的介绍，请参见[主要事件说明](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_0089.html)。
#### 库
在库中，可配置页面需要的依赖库，扩展页面功能。库分为系统预置库和自定义库两种，更多介绍请参见[如何引入第三方库](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_0058.html)。