merge upstream

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

@@ -142,42 +142,68 @@ table view 的设置项有三层，可以分别对表格级别、行级别、单
 | rowspan    | `number`                                  |                | 单元格垂直跨几列                                                 |
 | body       | [SchemaNode](../../docs/types/schemanode) |                | 其它 amis 设置                                                   |
 
-### 支持变量及表达式
+#### 单元格样式示例
 
-> 2.1.0 及以上版本
+比如将其它两列的单元格边框设置为 0，就能实现特殊的展现效果
 
-table-view 的所有属性都支持变量，比如下面的例子通过表达式实现了针对数据进行不同展示
-
-```schema
+```schema: scope="body"
 {
-  "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"
-            }
+  "type": "table-view",
+  "trs": [
+    {
+      "background": "#F7F7F7",
+      "tds": [
+        {
+          "body": {
+            "type": "tpl",
+            "tpl": "地区"
           }
-        ]
-      }
-    ]
-  }
+        },
+        {
+          "body": {
+            "type": "tpl",
+            "tpl": "城市"
+          }
+        },
+        {
+          "body": {
+            "type": "tpl",
+            "tpl": "销量"
+          }
+        }
+      ]
+    },
+    {
+      "tds": [
+        {
+          "body": {
+            "type": "tpl",
+            "tpl": ""
+          },
+          "style": {
+            "borderBottomWidth": 0,
+            "borderLeftWidth": 0
+          }
+        },
+        {
+          "body": {
+            "type": "tpl",
+            "tpl": "北京"
+          }
+        },
+        {
+          "body": {
+            "type": "tpl",
+            "tpl": ""
+          },
+          "style": {
+            "borderBottomWidth": 0,
+            "borderRightWidth": 0
+          }
+        }
+      ]
+    }
+  ]
 }
 ```
 
@@ -288,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-ui/src/components/BaiduMapPicker.tsx

@@ -100,7 +100,7 @@ export class BaiduMapPicker extends React.Component<
   }
 
   componentWillUnmount() {
-    this.ac?.dispose();
+    this.ac?.dispose?.();
     document.body.removeChild(this.placeholderInput!);
 
     delete this.placeholderInput;

packages/amis/src/renderers/TableView.tsx

@@ -188,7 +188,7 @@ export default class TableView extends React.Component<TableViewProps, object> {
           width: td.width || 'auto',
           textAlign: td.align || 'left',
           verticalAlign: td.valign || 'center',
-          ...style
+          ...td.style
         }}
         align={td.align}
         valign={td.valign}
@@ -261,22 +261,12 @@ export default class TableView extends React.Component<TableViewProps, object> {
   }
 
   render() {
-    const {
-      width,
-      border,
-      borderColor,
-      trs,
-      classnames: cx,
-      className
-    } = this.props;
-    let styleBorder;
-    if (border) {
-      styleBorder = `1px solid ${borderColor}`;
-    }
+    const {width, trs, classnames: cx, className} = this.props;
+
     return (
       <table
         className={cx('TableView', className)}
-        style={{width: width, border: styleBorder, borderCollapse: 'collapse'}}
+        style={{width: width, borderCollapse: 'collapse'}}
       >
         {this.renderCaption()}
         {this.renderCols()}