feat: Table View 的行和列支持配置 visibleOn Closes #9621 (#10222)

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

@@ -353,6 +353,94 @@ table-view 的所有属性都支持变量，比如下面的例子通过表达式
 }
 ```
 
+### tr 和 td 支持 visibleOn
+
+> 6.5 及以后版本
+
+可以在行和列上配置 visibleOn 或 hiddenOn 属性来实现根据数据动态渲染界面。
+
+```schema: scope="body"
+{
+  "type": "form",
+    "api": "/api/mock2/form/saveForm",
+    "body": [
+      {
+        "name": "firstRow",
+        "type": "switch",
+        "label": "显示第一行",
+        "value": true,
+      },
+      {
+        "name": "displayBeijing",
+        "type": "switch",
+        "label": "显示北京",
+        "value": true,
+      },
+      {
+        "type": "table-view",
+        "trs": [
+          {
+            "background": "#F7F7F7",
+            "visibleOn": "firstRow",
+            "tds": [
+              {
+                "body": {
+                  "type": "tpl",
+                  "tpl": "地区"
+                }
+              },
+              {
+                "body": {
+                  "type": "tpl",
+                  "tpl": "城市"
+                }
+              },
+              {
+                "body": {
+                  "type": "tpl",
+                  "tpl": "销量"
+                }
+              }
+            ]
+          },
+          {
+            "tds": [
+              {
+                "body": {
+                  "type": "tpl",
+                  "tpl": ""
+                },
+                "style": {
+                  "borderBottomWidth": 0,
+                  "borderLeftWidth": 0
+                }
+              },
+              {
+                "visibleOn": "displayBeijing",
+                "body": {
+                  "type": "tpl",
+                  "tpl": "北京"
+                }
+              },
+              {
+                "body": {
+                  "type": "tpl",
+                  "tpl": ""
+                },
+                "style": {
+                  "borderBottomWidth": 0,
+                  "borderRightWidth": 0
+                }
+              }
+            ]
+          }
+        ]
+      }
+    ]
+}
+
+```
+
 ## 作为布局方法
 
 table-view 除了可以用来展现表格类型的数据，还能用来实现复杂布局效果，只需要将 `border` 隐藏就行，除了拆分单元格还能通过嵌套的方式实现布局，比如：

packages/amis/__tests__/renderers/TableView.test.tsx

@@ -200,3 +200,67 @@ test('Renderer:tableview layout', () => {
 
   expect(container).toMatchSnapshot();
 });
+
+test('Renderer:tableview visibleOn', () => {
+  const {container} = render(
+    amisRender(
+      {
+        type: 'page',
+        body: {
+          type: 'table-view',
+          trs: [
+            {
+              background: '#F7F7F7',
+              visibleOn: 'false',
+              tds: [
+                {
+                  body: {
+                    type: 'tpl',
+                    tpl: '地区'
+                  }
+                },
+                {
+                  body: {
+                    type: 'tpl',
+                    tpl: '城市'
+                  }
+                },
+                {
+                  body: {
+                    type: 'tpl',
+                    tpl: '销量'
+                  }
+                }
+              ]
+            },
+            {
+              tds: [
+                {
+                  body: {
+                    type: 'tpl',
+                    tpl: ''
+                  },
+                  style: {
+                    borderBottomWidth: 0,
+                    borderLeftWidth: 0
+                  }
+                },
+                {
+                  visibleOn: 'false',
+                  body: {
+                    type: 'tpl',
+                    tpl: '北京'
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      },
+      {},
+      makeEnv({})
+    )
+  );
+
+  expect(container).toMatchSnapshot();
+});

packages/amis/__tests__/renderers/__snapshots__/TableView.test.tsx.snap

@@ -270,3 +270,47 @@ exports[`Renderer:tableview layout 1`] = `
   </div>
 </div>
 `;
+
+exports[`Renderer:tableview visibleOn 1`] = `
+<div>
+  <div
+    class="cxd-Page"
+  >
+    <div
+      class="cxd-Page-content"
+    >
+      <div
+        class="cxd-Page-main"
+      >
+        <div
+          class="cxd-Page-body"
+          role="page-body"
+        >
+          <table
+            class="cxd-TableView"
+            style="width: 100%; border-collapse: collapse;"
+          >
+            <tbody>
+              <tr>
+                <td
+                  style="font-weight: normal; width: auto; text-align: left; vertical-align: center; border-bottom-width: 0; border-left-width: 0;"
+                >
+                  <span
+                    class="cxd-TplField"
+                  >
+                    <span>
+                      <span
+                        class="text-muted"
+                      />
+                    </span>
+                  </span>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

packages/amis/src/renderers/TableView.tsx

@@ -8,7 +8,8 @@ import {
   RendererProps,
   resolveMappingObject,
   CustomStyle,
-  setThemeClassName
+  setThemeClassName,
+  isVisible
 } from 'amis-core';
 import {BaseSchema, SchemaObject} from '../Schema';
 
@@ -68,6 +69,10 @@ export type TdObject = {
    * 自定义样式
    */
   style?: object;
+
+  visibleOn?: string;
+
+  hiddenOn?: string;
 };
 
 /**
@@ -90,6 +95,10 @@ export type TrObject = {
   tds: TdObject[];
 
   style?: object;
+
+  visibleOn?: string;
+
+  hiddenOn?: string;
 };
 
 /**
@@ -177,13 +186,13 @@ export default class TableView extends React.Component<TableViewProps, object> {
   }
 
   renderTd(td: TdObject, colIndex: number, rowIndex: number) {
-    const {border, borderColor, render, style, padding} = this.props;
+    const {border, borderColor, render, data, padding} = this.props;
     const key = `td-${colIndex}`;
     let styleBorder;
     if (border) {
       styleBorder = `1px solid ${borderColor}`;
     }
-    return (
+    return isVisible(td, data) ? (
       <td
         style={{
           border: styleBorder,
@@ -204,7 +213,7 @@ export default class TableView extends React.Component<TableViewProps, object> {
       >
         {this.renderTdBody(td.body)}
       </td>
-    );
+    ) : null;
   }
 
   renderTdBody(body?: SchemaObject) {
@@ -221,14 +230,15 @@ export default class TableView extends React.Component<TableViewProps, object> {
 
   renderTr(tr: TrObject, rowIndex: number) {
     const key = `tr-${rowIndex}`;
-    return (
+    const {data} = this.props;
+    return isVisible(tr, data) ? (
       <tr
         style={{height: tr.height, background: tr.background, ...tr.style}}
         key={key}
       >
         {this.renderTds(tr.tds || [], rowIndex)}
       </tr>
-    );
+    ) : null;
   }
 
   renderTrs(trs: TrObject[]) {
@@ -276,8 +286,6 @@ export default class TableView extends React.Component<TableViewProps, object> {
       wrapperCustomStyle,
       env,
       themeCss,
-      testid,
-      baseControlClassName,
       style
     } = this.props;