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

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;