Table: improve performance for rendering tooltip, fixed #3478 (#3836)

* Table: improve performance for rendering tooltip, fixed #3478

* Table: add tooltip-effect property

examples/docs/en-US/table.md

@@ -1440,7 +1440,7 @@ When the row content is too long and you do not want to display the horizontal s
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | data | table data | array | — | — |
 | height | Table's height. By default it has an `auto` height. If its value is a number, the height is measured in pixels; if its value is a string, the height is affected by external styles | string/number | — | — |
-| maxHeight | Table's max-height. The height of the table starts from `auto` until it reaches the maxHeight limit. The `maxHeight` is measured in pixels, same as `height` | string/number | — | — |
+| max-height | Table's max-height. The height of the table starts from `auto` until it reaches the maxHeight limit. The `maxHeight` is measured in pixels, same as `height` | string/number | — | — |
 | stripe | whether table is striped | boolean | — | false |
 | border | whether table has vertical border | boolean | — | false |
 | fit | whether width of column automatically fits its container | boolean | — | true |
@@ -1454,6 +1454,7 @@ When the row content is too long and you do not want to display the horizontal s
 | default-expand-all | whether expand all rows by default, only works when the table has a column type="expand" | Boolean | — | false |
 | expand-row-keys | set expanded rows by this prop, prop's value is the keys of expand rows, you should set row-key before using this prop | Array | — | |
 | default-sort | set the default sort column and order. property `prop` is used to set default sort column, property `order` is used to set default sort order | Object | `order`: ascending, descending | if `prop` is set, and `order` is not set, then `order` is default to ascending |
+| tooltip-effect | tooltip `effect` property | String | dark/light | | dark |
 
 ### Table Events
 | Event Name | Description | Parameters |

examples/docs/zh-CN/table.md

@@ -1109,6 +1109,7 @@
   <el-table
     :data="tableData3"
     border
+    tooltip-effect="dark"
     style="width: 100%"
     @selection-change="handleSelectionChange">
     <el-table-column
@@ -1524,6 +1525,7 @@
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | data | 显示的数据 | array | — | — |
 | height | Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则 Table 的高度受控于外部样式。  | string/number | — | — |
+| max-height | Table 的最大高度 | string/number | — | — |
 | stripe | 是否为斑马纹 table | boolean | — | false |
 | border | 是否带有纵向边框 | boolean | — | false |
 | fit | 列的宽度是否自撑开 | boolean | — | true |
@@ -1537,6 +1539,7 @@
 | default-expand-all | 是否默认展开所有行，当 Table 中存在 type="expand" 的 Column 的时候有效 | Boolean | — | false |
 | expand-row-keys | 可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。| Array | — | |
 | default-sort | 默认的排序列的prop和顺序。它的`prop`属性指定默认的排序的列，`order`指定默认排序的顺序| Object | `order`: ascending, descending | 如果只指定了`prop`, 没有指定`order`, 则默认顺序是ascending |
+| tooltip-effect | tooltip `effect` 属性 | String | dark/light | | dark |
 
 ### Table Events
 | 事件名 | 说明 | 参数 |

packages/table/src/table-body.js

@@ -1,5 +1,6 @@
 import { getCell, getColumnByCell, getRowIdentity } from './util';
 import ElCheckbox from 'element-ui/packages/checkbox';
+import debounce from 'throttle-debounce/debounce';
 
 export default {
   components: {
@@ -73,6 +74,8 @@ export default {
                   </tr>)
                 : ''
               ]
+            ).concat(
+              <el-tooltip effect={ this.table.tooltipEffect } placement="top" ref="tooltip" content={ this.tooltipContent }></el-tooltip>
             )
           }
         </tbody>
@@ -142,10 +145,14 @@ export default {
 
   data() {
     return {
-      tooltipDisabled: true
+      tooltipContent: ''
     };
   },
 
+  created() {
+    this.activateTooltip = debounce(50, tooltip => tooltip.handleShowPopper());
+  },
+
   methods: {
     getKeyOfRow(row, index) {
       const rowKey = this.table.rowKey;
@@ -199,10 +206,18 @@ export default {
       // 判断是否text-overflow, 如果是就显示tooltip
       const cellChild = event.target.querySelector('.cell');
 
-      this.tooltipDisabled = cellChild.scrollWidth <= cellChild.offsetWidth;
+      if (cellChild.scrollWidth > cellChild.offsetWidth) {
+        const tooltip = this.$refs.tooltip;
+
+        this.tooltipContent = cell.innerText;
+        tooltip.referenceElm = cell;
+        tooltip.doDestroy();
+        this.activateTooltip(tooltip);
+      }
     },
 
     handleCellMouseLeave(event) {
+      this.$refs.tooltip.handleClosePopper();
       const cell = getCell(event);
       if (!cell) return;
 

packages/table/src/table-column.js

@@ -288,13 +288,7 @@ export default {
       }
 
       return _self.showOverflowTooltip || _self.showTooltipWhenOverflow
-        ? <el-tooltip
+        ? <div class="cell el-tooltip">{ renderCell(h, data) }</div>
-            effect={ this.effect }
-            placement="top"
-            disabled={ this.tooltipDisabled }>
-            <div class="cell">{ renderCell(h, data) }</div>
-            <span slot="content">{ renderCell(h, data) }</span>
-          </el-tooltip>
         : <div class="cell">{ renderCell(h, data) }</div>;
     };
   },

packages/table/src/table.vue

@@ -169,7 +169,9 @@
 
       defaultExpandAll: Boolean,
 
-      defaultSort: Object
+      defaultSort: Object,
+
+      tooltipEffect: String
     },
 
     components: {