Merge pull request #4923 from nwind/feat-table-view-var

feat: table-view 的所有属性支持变量

docs/zh-CN/components/table-view.md

@@ -314,6 +314,45 @@ table view 的设置项有三层，可以分别对表格级别、行级别、单
 }
 ```
 
+### 支持变量及表达式
+
+> 2.1.0 及以上版本
+
+table-view 的所有属性都支持变量，比如下面的例子通过表达式实现了针对数据进行不同展示
+
+```schema
+{
+  "type": "page",
+  "title": "标题",
+  "data": {
+    "score": 40
+  },
+  "body": {
+    "type": "table-view",
+    "trs": [
+      {
+        "tds": [
+          {
+            "background": "${score>50 ? '#fef1d2': '#d7f8ff'}",
+            "body": {
+              "type": "tpl",
+              "tpl": "分数>50"
+            }
+          },
+          {
+            "background": "${score<100 ? '#fef1d2': '#d7f8ff'}",
+            "body": {
+              "type": "tpl",
+              "tpl": "分数<100"
+            }
+          }
+        ]
+      }
+    ]
+  }
+}
+```
+
 ## 作为布局方法
 
 table-view 除了可以用来展现表格类型的数据，还能用来实现复杂布局效果，只需要将 `border` 隐藏就行，除了拆分单元格还能通过嵌套的方式实现布局，比如：

packages/amis-core/src/utils/dataMapping.ts

@@ -17,6 +17,20 @@ export function resolveMapping(
     : value;
 }
 
+/**
+ * 遍历对象，对每个字符串 key 进行数据映射
+ * @param value 要映射的对象
+ * @param data 数据上下文
+ */
+export function resolveMappingObject(value: PlainObject, data: PlainObject) {
+  for (const key of Object.keys(value)) {
+    if (typeof value[key] === 'string') {
+      value[key] = resolveMapping(value[key], data);
+    }
+  }
+  return value;
+}
+
 export function dataMapping(
   to: any,
   from: PlainObject = {},

packages/amis-core/src/utils/tpl-builtin.ts

@@ -10,7 +10,7 @@ import {stripNumber} from './stripNumber';
 import {tokenize} from './tokenize';
 import {resolveVariable} from './resolveVariable';
 import {resolveVariableAndFilter} from './resolveVariableAndFilter';
-import {dataMapping, resolveMapping} from './dataMapping';
+import {dataMapping, resolveMapping, resolveMappingObject} from './dataMapping';
 import './filter'; // 扩充 formula 里面的 filter
 
 export {
@@ -29,6 +29,7 @@ export {
   resolveVariable,
   resolveVariableAndFilter,
   resolveMapping,
+  resolveMappingObject,
   dataMapping
 };
 

packages/amis/src/renderers/TableView.tsx

@@ -3,9 +3,7 @@
  */
 
 import React from 'react';
-import {Renderer, RendererProps} from 'amis-core';
-import {Api, SchemaNode, Schema, ActionObject} from 'amis-core';
-import {isVisible} from 'amis-core';
+import {Renderer, RendererProps, resolveMappingObject} from 'amis-core';
 import {BaseSchema, SchemaObject} from '../Schema';
 
 // 为了方便编辑器，目前考虑不区分 th 和 td，但因为可以控制展现，所以能实现一样的效果，同时后续这个组件还承担复杂布局的功能，不适合用 th
@@ -209,7 +207,10 @@ export default class TableView extends React.Component<TableViewProps, object> {
   }
 
   renderTds(tds: TdObject[], rowIndex: number) {
-    return tds.map((td, colIndex) => this.renderTd(td, colIndex, rowIndex));
+    const {data} = this.props;
+    return tds.map((td, colIndex) =>
+      this.renderTd(resolveMappingObject(td, data), colIndex, rowIndex)
+    );
   }
 
   renderTr(tr: TrObject, rowIndex: number) {
@@ -225,14 +226,18 @@ export default class TableView extends React.Component<TableViewProps, object> {
   }
 
   renderTrs(trs: TrObject[]) {
-    const tr = trs.map((tr, rowIndex) => this.renderTr(tr, rowIndex));
+    const {data} = this.props;
+    const tr = trs.map((tr, rowIndex) =>
+      this.renderTr(resolveMappingObject(tr, data), rowIndex)
+    );
     return tr;
   }
 
   renderCols() {
-    const {cols} = this.props;
+    const {cols, data} = this.props;
     if (cols) {
       const colsElement = cols.map(col => {
+        col = resolveMappingObject(col, data);
         return <col span={col.span} style={col.style}></col>;
       });
       return <colgroup>{colsElement}</colgroup>;
@@ -272,6 +277,7 @@ export default class TableView extends React.Component<TableViewProps, object> {
 }
 
 @Renderer({
-  type: 'table-view'
+  type: 'table-view',
+  autoVar: true
 })
 export class TableViewRenderer extends TableView {}