mazey-element-ui 2.0.1 → 2.15.16

package/packages/table/src/table-body.js

@@ -1,9 +1,12 @@
-import { getCell, getColumnByCell, getRowIdentity } from './util';
-import { getStyle, hasClass, addClass, removeClass } from 'element-ui/src/utils/dom';
-import ElCheckbox from 'element-ui/packages/checkbox';
-import ElTooltip from 'element-ui/packages/tooltip';
+import { arrayFindIndex } from 'mazey-element-ui/src/utils/util';
+import { getCell, getColumnByCell, getRowIdentity, objectEquals } from './util';
+import { getStyle, hasClass, removeClass, addClass } from 'mazey-element-ui/src/utils/dom';
+import ElCheckbox from 'mazey-element-ui/packages/checkbox';
+import ElTooltip from 'mazey-element-ui/packages/tooltip';
 import debounce from 'throttle-debounce/debounce';
 import LayoutObserver from './layout-observer';
+import { mapStates } from './store/helper';
+import TableRow from './table-row.js';
 
 export default {
   name: 'ElTableBody',
@@ -12,7 +15,8 @@ export default {
 
   components: {
     ElCheckbox,
-    ElTooltip
+    ElTooltip,
+    TableRow
   },
 
   props: {
@@ -28,7 +32,7 @@ export default {
   },
 
   render(h) {
-    const columnsHidden = this.columns.map((column, index) => this.isColumnHidden(index));
+    const data = this.data || [];
     return (
       <table
         class="el-table__body"
@@ -37,164 +41,67 @@ export default {
         border="0">
         <colgroup>
           {
-            this._l(this.columns, column => <col name={ column.id } />)
+            this.columns.map(column => <col name={column.id} key={column.id} />)
           }
         </colgroup>
         <tbody>
           {
-            this._l(this.data, (row, $index) =>
-              [<tr
-                style={ this.rowStyle ? this.getRowStyle(row, $index) : null }
-                key={ this.table.rowKey ? this.getKeyOfRow(row, $index) : $index }
-                on-dblclick={ ($event) => this.handleDoubleClick($event, row) }
-                on-click={ ($event) => this.handleClick($event, row) }
-                on-contextmenu={ ($event) => this.handleContextMenu($event, row) }
-                on-mouseenter={ _ => this.handleMouseEnter($index) }
-                on-mouseleave={ _ => this.handleMouseLeave() }
-                class={ [this.getRowClass(row, $index)] }>
-                {
-                  this._l(this.columns, (column, cellIndex) => {
-                    const { rowspan, colspan } = this.getSpan(row, column, $index, cellIndex);
-                    if (!rowspan || !colspan) {
-                      return '';
-                    } else {
-                      if (rowspan === 1 && colspan === 1) {
-                        return (
-                          <td
-                            style={ this.getCellStyle($index, cellIndex, row, column) }
-                            class={ this.getCellClass($index, cellIndex, row, column) }
-                            on-mouseenter={ ($event) => this.handleCellMouseEnter($event, row) }
-                            on-mouseleave={ this.handleCellMouseLeave }>
-                            {
-                              column.renderCell.call(
-                                this._renderProxy,
-                                h,
-                                {
-                                  row,
-                                  column,
-                                  $index,
-                                  store: this.store,
-                                  _self: this.context || this.table.$vnode.context
-                                },
-                                columnsHidden[cellIndex]
-                              )
-                            }
-                          </td>
-                        );
-                      } else {
-                        return (
-                          <td
-                            style={ this.getCellStyle($index, cellIndex, row, column) }
-                            class={ this.getCellClass($index, cellIndex, row, column) }
-                            rowspan={ rowspan }
-                            colspan={ colspan }
-                            on-mouseenter={ ($event) => this.handleCellMouseEnter($event, row) }
-                            on-mouseleave={ this.handleCellMouseLeave }>
-                            {
-                              column.renderCell.call(
-                                this._renderProxy,
-                                h,
-                                {
-                                  row,
-                                  column,
-                                  $index,
-                                  store: this.store,
-                                  _self: this.context || this.table.$vnode.context
-                                },
-                                columnsHidden[cellIndex]
-                              )
-                            }
-                          </td>
-                        );
-                      }
-                    }
-                  })
-                }
-              </tr>,
-              this.store.isRowExpanded(row)
-                ? (<tr>
-                  <td colspan={ this.columns.length } class="el-table__expanded-cell">
-                    { this.table.renderExpanded ? this.table.renderExpanded(h, { row, $index, store: this.store }) : ''}
-                  </td>
-                </tr>)
-                : ''
-              ]
-            ).concat(
-              <el-tooltip effect={ this.table.tooltipEffect } placement="top" ref="tooltip" content={ this.tooltipContent }></el-tooltip>
-            )
+            data.reduce((acc, row) => {
+              return acc.concat(this.wrappedRowRender(row, acc.length));
+            }, [])
           }
+          <el-tooltip effect={this.table.tooltipEffect} placement="top" ref="tooltip" content={this.tooltipContent}></el-tooltip>
         </tbody>
       </table>
     );
   },
 
-  watch: {
-    'store.states.hoverRow'(newVal, oldVal) {
-      if (!this.store.states.isComplex) return;
-      const el = this.$el;
-      if (!el) return;
-      const tr = el.querySelector('tbody').children;
-      const rows = [].filter.call(tr, row => hasClass(row, 'el-table__row'));
-      const oldRow = rows[oldVal];
-      const newRow = rows[newVal];
-      if (oldRow) {
-        removeClass(oldRow, 'hover-row');
-      }
-      if (newRow) {
-        addClass(newRow, 'hover-row');
-      }
-    },
-    'store.states.currentRow'(newVal, oldVal) {
-      if (!this.highlight) return;
-      const el = this.$el;
-      if (!el) return;
-      const data = this.store.states.data;
-      const tr = el.querySelector('tbody').children;
-      const rows = [].filter.call(tr, row => hasClass(row, 'el-table__row'));
-      const oldRow = rows[data.indexOf(oldVal)];
-      const newRow = rows[data.indexOf(newVal)];
-      if (oldRow) {
-        removeClass(oldRow, 'current-row');
-      } else {
-        [].forEach.call(rows, row => removeClass(row, 'current-row'));
-      }
-      if (newRow) {
-        addClass(newRow, 'current-row');
-      }
-    }
-  },
-
   computed: {
     table() {
       return this.$parent;
     },
 
-    data() {
-      return this.store.states.data;
-    },
-
-    columnsCount() {
-      return this.store.states.columns.length;
+    ...mapStates({
+      data: 'data',
+      columns: 'columns',
+      treeIndent: 'indent',
+      leftFixedLeafCount: 'fixedLeafColumnsLength',
+      rightFixedLeafCount: 'rightFixedLeafColumnsLength',
+      columnsCount: states => states.columns.length,
+      leftFixedCount: states => states.fixedColumns.length,
+      rightFixedCount: states => states.rightFixedColumns.length,
+      hasExpandColumn: states => states.columns.some(({ type }) => type === 'expand')
+    }),
+
+    columnsHidden() {
+      return this.columns.map((column, index) => this.isColumnHidden(index));
     },
 
-    leftFixedLeafCount() {
-      return this.store.states.fixedLeafColumnsLength;
-    },
-
-    rightFixedLeafCount() {
-      return this.store.states.rightFixedLeafColumnsLength;
-    },
-
-    leftFixedCount() {
-      return this.store.states.fixedColumns.length;
-    },
-
-    rightFixedCount() {
-      return this.store.states.rightFixedColumns.length;
-    },
+    firstDefaultColumnIndex() {
+      return arrayFindIndex(this.columns, ({ type }) => type === 'default');
+    }
+  },
 
-    columns() {
-      return this.store.states.columns;
+  watch: {
+    // don't trigger getter of currentRow in getCellClass. see https://jsfiddle.net/oe2b4hqt/
+    // update DOM manually. see https://github.com/ElemeFE/element/pull/13954/files#diff-9b450c00d0a9dec0ffad5a3176972e40
+    'store.states.hoverRow'(newVal, oldVal) {
+      if (!this.store.states.isComplex || this.$isServer) return;
+      let raf = window.requestAnimationFrame;
+      if (!raf) {
+        raf = (fn) => setTimeout(fn, 16);
+      }
+      raf(() => {
+        const rows = this.$el.querySelectorAll('.el-table__row');
+        const oldRow = rows[oldVal];
+        const newRow = rows[newVal];
+        if (oldRow) {
+          removeClass(oldRow, 'hover-row');
+        }
+        if (newRow) {
+          addClass(newRow, 'hover-row');
+        }
+      });
     }
   },
 
@@ -230,7 +137,6 @@ export default {
     getSpan(row, column, rowIndex, columnIndex) {
       let rowspan = 1;
       let colspan = 1;
-
       const fn = this.table.spanMethod;
       if (typeof fn === 'function') {
         const result = fn({
@@ -239,7 +145,6 @@ export default {
           rowIndex,
           columnIndex
         });
-
         if (Array.isArray(result)) {
           rowspan = result[0];
           colspan = result[1];
@@ -248,11 +153,7 @@ export default {
           colspan = result.colspan;
         }
       }
-
-      return {
-        rowspan,
-        colspan
-      };
+      return { rowspan, colspan };
     },
 
     getRowStyle(row, rowIndex) {
@@ -263,11 +164,23 @@ export default {
           rowIndex
         });
       }
-      return rowStyle;
+      return rowStyle || null;
     },
 
     getRowClass(row, rowIndex) {
+      let selection = this.store.states.selection;
       const classes = ['el-table__row'];
+      if (this.table.highlightCurrentRow && row === this.store.states.currentRow) {
+        classes.push('current-row');
+      }
+
+      if (this.table.highlightSelectionRow) {
+        for (let i = 0; i < selection.length; i++) {
+          if (objectEquals(row, selection[i])) {
+            classes.push('selection-row');
+          }
+        };
+      }
 
       if (this.stripe && rowIndex % 2 === 1) {
         classes.push('el-table__row--striped');
@@ -286,7 +199,7 @@ export default {
         classes.push('expanded');
       }
 
-      return classes.join(' ');
+      return classes;
     },
 
     getCellStyle(rowIndex, columnIndex, row, column) {
@@ -321,22 +234,32 @@ export default {
         }));
       }
 
+      classes.push('el-table__cell');
+
       return classes.join(' ');
     },
 
+    getColspanRealWidth(columns, colspan, index) {
+      if (colspan < 1) {
+        return columns[index].realWidth;
+      }
+      const widthArr = columns.map(({ realWidth }) => realWidth).slice(index, index + colspan);
+      return widthArr.reduce((acc, width) => acc + width, -1);
+    },
+
     handleCellMouseEnter(event, row) {
       const table = this.table;
       const cell = getCell(event);
 
       if (cell) {
         const column = getColumnByCell(table, cell);
-        const hoverState = table.hoverState = {cell, column, row};
+        const hoverState = table.hoverState = { cell, column, row };
         table.$emit('cell-mouse-enter', hoverState.row, hoverState.column, hoverState.cell, event);
       }
 
       // 判断是否text-overflow, 如果是就显示tooltip
       const cellChild = event.target.querySelector('.cell');
-      if (!hasClass(cellChild, 'el-tooltip')) {
+      if (!(hasClass(cellChild, 'el-tooltip') && cellChild.childNodes.length)) {
         return;
       }
       // use range width instead of scrollWidth to determine whether the text is overflowing
@@ -350,7 +273,7 @@ export default {
       if ((rangeWidth + padding > cellChild.offsetWidth || cellChild.scrollWidth > cellChild.offsetWidth) && this.$refs.tooltip) {
         const tooltip = this.$refs.tooltip;
         // TODO 会引起整个 Table 的重新渲染，需要优化
-        this.tooltipContent = cell.textContent || cell.innerText;
+        this.tooltipContent = cell.innerText || cell.textContent;
         tooltip.referenceElm = cell;
         tooltip.$refs.popper && (tooltip.$refs.popper.style.display = 'none');
         tooltip.doDestroy();
@@ -372,13 +295,13 @@ export default {
       this.table.$emit('cell-mouse-leave', oldHoverState.row, oldHoverState.column, oldHoverState.cell, event);
     },
 
-    handleMouseEnter(index) {
+    handleMouseEnter: debounce(30, function(index) {
       this.store.commit('setHoverRow', index);
-    },
+    }),
 
-    handleMouseLeave() {
+    handleMouseLeave: debounce(30, function() {
       this.store.commit('setHoverRow', null);
-    },
+    }),
 
     handleContextMenu(event, row) {
       this.handleEvent(event, row, 'contextmenu');
@@ -403,12 +326,144 @@ export default {
           table.$emit(`cell-${name}`, row, column, cell, event);
         }
       }
-      table.$emit(`row-${name}`, row, event, column);
+      table.$emit(`row-${name}`, row, column, event);
     },
 
-    handleExpandClick(row, e) {
-      e.stopPropagation();
-      this.store.toggleRowExpansion(row);
+    rowRender(row, $index, treeRowData) {
+      const { treeIndent, columns, firstDefaultColumnIndex } = this;
+      const rowClasses = this.getRowClass(row, $index);
+      let display = true;
+      if (treeRowData) {
+        rowClasses.push('el-table__row--level-' + treeRowData.level);
+        display = treeRowData.display;
+      }
+      // 指令 v-show 会覆盖 row-style 中 display
+      // 使用 :style 代替 v-show https://github.com/ElemeFE/element/issues/16995
+      let displayStyle = display ? null : {
+        display: 'none'
+      };
+      return (
+        <TableRow
+          style={[displayStyle, this.getRowStyle(row, $index)]}
+          class={rowClasses}
+          key={this.getKeyOfRow(row, $index)}
+          nativeOn-dblclick={($event) => this.handleDoubleClick($event, row)}
+          nativeOn-click={($event) => this.handleClick($event, row)}
+          nativeOn-contextmenu={($event) => this.handleContextMenu($event, row)}
+          nativeOn-mouseenter={_ => this.handleMouseEnter($index)}
+          nativeOn-mouseleave={this.handleMouseLeave}
+          columns={columns}
+          row={row}
+          index={$index}
+          store={this.store}
+          context={this.context || this.table.$vnode.context}
+          firstDefaultColumnIndex={firstDefaultColumnIndex}
+          treeRowData={treeRowData}
+          treeIndent={treeIndent}
+          columnsHidden={this.columnsHidden}
+          getSpan={this.getSpan}
+          getColspanRealWidth={this.getColspanRealWidth}
+          getCellStyle={this.getCellStyle}
+          getCellClass={this.getCellClass}
+          handleCellMouseEnter={this.handleCellMouseEnter}
+          handleCellMouseLeave={this.handleCellMouseLeave}
+          isSelected={this.store.isSelected(row)}
+          isExpanded={this.store.states.expandRows.indexOf(row) > -1}
+          fixed={this.fixed}
+        >
+        </TableRow>
+      );
+    },
+
+    wrappedRowRender(row, $index) {
+      const store = this.store;
+      const { isRowExpanded, assertRowKey } = store;
+      const { treeData, lazyTreeNodeMap, childrenColumnName, rowKey } = store.states;
+      if (this.hasExpandColumn && isRowExpanded(row)) {
+        const renderExpanded = this.table.renderExpanded;
+        const tr = this.rowRender(row, $index);
+        if (!renderExpanded) {
+          console.error('[Element Error]renderExpanded is required.');
+          return tr;
+        }
+        // 使用二维数组，避免修改 $index
+        return [[
+          tr,
+          <tr key={'expanded-row__' + tr.key}>
+            <td colspan={ this.columnsCount } class="el-table__cell el-table__expanded-cell">
+              { renderExpanded(this.$createElement, { row, $index, store: this.store }) }
+            </td>
+          </tr>]];
+      } else if (Object.keys(treeData).length) {
+        assertRowKey();
+        // TreeTable 时，rowKey 必须由用户设定，不使用 getKeyOfRow 计算
+        // 在调用 rowRender 函数时，仍然会计算 rowKey，不太好的操作
+        const key = getRowIdentity(row, rowKey);
+        let cur = treeData[key];
+        let treeRowData = null;
+        if (cur) {
+          treeRowData = {
+            expanded: cur.expanded,
+            level: cur.level,
+            display: true
+          };
+          if (typeof cur.lazy === 'boolean') {
+            if (typeof cur.loaded === 'boolean' && cur.loaded) {
+              treeRowData.noLazyChildren = !(cur.children && cur.children.length);
+            }
+            treeRowData.loading = cur.loading;
+          }
+        }
+        const tmp = [this.rowRender(row, $index, treeRowData)];
+        // 渲染嵌套数据
+        if (cur) {
+          // currentRow 记录的是 index，所以还需主动增加 TreeTable 的 index
+          let i = 0;
+          const traverse = (children, parent) => {
+            if (!(children && children.length && parent)) return;
+            children.forEach(node => {
+              // 父节点的 display 状态影响子节点的显示状态
+              const innerTreeRowData = {
+                display: parent.display && parent.expanded,
+                level: parent.level + 1
+              };
+              const childKey = getRowIdentity(node, rowKey);
+              if (childKey === undefined || childKey === null) {
+                throw new Error('for nested data item, row-key is required.');
+              }
+              cur = { ...treeData[childKey] };
+              // 对于当前节点，分成有无子节点两种情况。
+              // 如果包含子节点的，设置 expanded 属性。
+              // 对于它子节点的 display 属性由它本身的 expanded 与 display 共同决定。
+              if (cur) {
+                innerTreeRowData.expanded = cur.expanded;
+                // 懒加载的某些节点，level 未知
+                cur.level = cur.level || innerTreeRowData.level;
+                cur.display = !!(cur.expanded && innerTreeRowData.display);
+                if (typeof cur.lazy === 'boolean') {
+                  if (typeof cur.loaded === 'boolean' && cur.loaded) {
+                    innerTreeRowData.noLazyChildren = !(cur.children && cur.children.length);
+                  }
+                  innerTreeRowData.loading = cur.loading;
+                }
+              }
+              i++;
+              tmp.push(this.rowRender(node, $index + i, innerTreeRowData));
+              if (cur) {
+                const nodes = lazyTreeNodeMap[childKey] || node[childrenColumnName];
+                traverse(nodes, cur);
+              }
+            });
+          };
+          // 对于 root 节点，display 一定为 true
+          cur.display = true;
+          const nodes = lazyTreeNodeMap[key] || row[childrenColumnName];
+          traverse(nodes, cur);
+        }
+        return tmp;
+      } else {
+        return this.rowRender(row, $index);
+      }
     }
   }
 };