为华为云Astro轻应用标准页面中的表格增加求和等计算能力

期望实现效果

在标准页面中，支持为表格增加求和、求积等计算能力，来提升数据的处理效率。例如，将表格中“商品花费”列的值设置为 “商品数*价格+其他成本”。

图1 实现效果

功能实现方法

1. 创建一个低代码应用。
   1. 参考授权用户使用华为云Astro轻应用并购买实例中操作，申请华为云Astro轻应用免费试用或购买商业实例。
   2. 实例购买后，在华为云Astro轻应用服务控制台的“主页”中，单击“进入首页”，进入应用开发页面。
   3. 在“应用”中，单击“新建低代码应用”或单击，进入新建低代码应用页面。

      首次创建应用时，请根据界面提示创建一个命名空间。命名空间一旦创建，不能修改和删除，创建前请确认好相关信息。建议使用公司或团队的缩写作为命名空间。

   4. 在新建低代码应用页面，应用类型选择“标准应用”，单击“确定”。
   5. 输入应用的标签和名称，单击“新建”，即可进入应用设计器。
      图2 创建一个空白应用
      

      表1 新建空白应用参数说明

      参数	说明	示例
      标签	新建应用的标签，长度不能超过80个字符。标签是应用在系统中的唯一标识，创建后不支持修改。	我的第一个应用
      名称	新建应用的名称，输入标签值后单击该参数的输入框，系统会自动生成应用的名称，同时自动在名称前，添加命名空间__。命名要求如下： 长度不能超过31个字符，包括前缀命名空间的长度。 名称前的内容为命名空间，在华为云Astro轻应用中为了避免不同租户间数据的重名，租户在首次创建应用时需要先定义一个命名空间。一个租户只能创建一个命名空间，创建后不支持修改。 必须以英文字母开头，只能由英文字母、数字或单下划线组成，且不允许以下划线结尾。	A

2. 创建对象“ProductList”，并为对象添加字段和数据。
   1. 在应用设计器的左侧导航栏中，选择“数据”，单击对象中的“+”。
   2. 设置对象的名称和唯一标识为“ProductList”，单击“确定”。
      图3 创建对象ProductList
      

   表2 新建ProductList对象参数说明

   参数	说明	示例
   对象名称	新建对象的名称，创建后可修改。 取值范围：1~80个字符。	ProductList
   唯一标识	新建对象在系统中的标识，创建后不支持修改。命名要求如下： 长度不能超过63个字符，包括前缀命名空间的长度。 标识前模糊掉的内容为命名空间，在华为云Astro轻应用中为了避免不同租户间数据的重名，租户在首次创建应用时需要先定义一个命名空间。一个租户只能创建一个命名空间，创建后不支持修改。 必须以英文字母开头，只能由英文字母，数字和下划线组成，且不能以下划线结尾。	ProductList

   3. 在已创建的对象中，单击，进入对象详情页面。
   4. 在“字段”页签，单击“添加”，为对象添加productName字段。
      图4 添加productName字段
      

      表3 添加cost字段参数说明

      参数	说明	示例
      显示名称	新建字段的名称，创建后可修改。 取值范围：1~63个字符。	商品名称
      唯一标识	新建字段在系统中的标识，创建后不支持修改。命名要求如下： 长度不能超过63个字符，包括前缀命名空间的长度。 必须以英文字母开头，只能由英文字母，数字和单下划线组成，且不能以下划线结尾。	productName
      字段类型	单击，在弹出的页面中，根据页面提供的参数解释，选择新建字段所属的类型。	文本

   5. 按照上述操作，为对象添加表4中字段。

      表4 添加其他字段

      显示名称	唯一标识	字段类型
      商品数目	productNum	数字
      商品价格	productPrice	数字
      其他成本	cost	数字

      图5 查看添加的字段
      
   6. 选择“数据”页签，单击“添加”，为对象添加图6中数据。
      图6 为对象添加数据
      

3. 新建对象模型。
   1. 在应用设计器中，选择“界面”，单击页面后的“+”。
   2. 输入页面的标签和名称，单击“添加”，新建一个标准页面。
   3. 在标准页面底部，单击“模型视图”，将页面从设计视图切换到模型视图。
   4. 单击“新增模型”，输入模型名称（如productCost）、“来源”选择“对象”，单击“下一步”。
      图7 新建模型
      
   5. 选择3中创建的对象和添加的字段，单击“下一步”，再单击“确定”，完成模型的创建。
      图8 选择对象和字段
      

4. 返回设计视图页面，新建表格关联模型。
   1. 在标准页面中拖入一个表格组件。
      图9 拖入表格组件
      
   2. 选中表格组件，在“属性 > 数据绑定 > 值绑定”中，单击。
   3. 选中3中创建的模型，单击“确定”。
      图10 选择模型
      

5. 选中表格，在“属性 > 表格列 > 已添加列”中，单击，添加一个空白列。
   图11 添加一个空白列
   

6. 单击新增空白列后的，修改“列名称”为“商品花费”，将“显示类型”设置为“自定义”并输入自定义代码。
   图12 修改列标题为商品花费
   
   图13 显示类型选择自定义并输入自定义代码
   

   自定义代码内容如下：

   return h("XInputNumber", {
   		"props": {
   		    "value": params.row.命名空间__productPrice__CST * params.row.命名空间__productNum__CST + params.row.命名空间__cost__CST,
   		    "readonly": true
   		}
   	})

7. 单击页面上方的，保存页面。
8. 保存成功后，单击页面上方的，预览效果。