cbvirtua 1.0.37 → 1.0.39

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

@@ -0,0 +1,249 @@
+import Vue from 'vue';
+import scrollbarWidth from 'element-ui/src/utils/scrollbar-width';
+import { parseHeight } from './util';
+
+class TableLayout {
+  constructor(options) {
+    this.observers = [];
+    this.table = null;
+    this.store = null;
+    this.columns = null;
+    this.fit = true;
+    this.showHeader = true;
+
+    this.height = null;
+    this.scrollX = false;
+    this.scrollY = false;
+    this.bodyWidth = null;
+    this.fixedWidth = null;
+    this.rightFixedWidth = null;
+    this.tableHeight = null;
+    this.headerHeight = 44; // Table Header Height
+    this.appendHeight = 0; // Append Slot Height
+    this.footerHeight = 44; // Table Footer Height
+    this.viewportHeight = null; // Table Height - Scroll Bar Height
+    this.bodyHeight = null; // Table Height - Table Header Height
+    this.fixedBodyHeight = null; // Table Height - Table Header Height - Scroll Bar Height
+    this.gutterWidth = scrollbarWidth();
+
+    for (let name in options) {
+      if (options.hasOwnProperty(name)) {
+        this[name] = options[name];
+      }
+    }
+
+    if (!this.table) {
+      throw new Error('table is required for Table Layout');
+    }
+    if (!this.store) {
+      throw new Error('store is required for Table Layout');
+    }
+  }
+
+  updateScrollY() {
+    const height = this.height;
+    if (height === null) return false;
+    const bodyWrapper = this.table.bodyWrapper;
+    if (this.table.$el && bodyWrapper) {
+      const body = bodyWrapper.querySelector('.el-table__body');
+      const prevScrollY = this.scrollY;
+      const scrollY = body.offsetHeight > this.bodyHeight;
+      this.scrollY = scrollY;
+      return prevScrollY !== scrollY;
+    }
+    return false;
+  }
+
+  setHeight(value, prop = 'height') {
+    if (Vue.prototype.$isServer) return;
+    const el = this.table.$el;
+    value = parseHeight(value);
+    this.height = value;
+
+    if (!el && (value || value === 0)) return Vue.nextTick(() => this.setHeight(value, prop));
+
+    if (typeof value === 'number') {
+      el.style[prop] = value + 'px';
+      this.updateElsHeight();
+    } else if (typeof value === 'string') {
+      el.style[prop] = value;
+      this.updateElsHeight();
+    }
+  }
+
+  setMaxHeight(value) {
+    this.setHeight(value, 'max-height');
+  }
+
+  getFlattenColumns() {
+    const flattenColumns = [];
+    const columns = this.table.columns;
+    columns.forEach((column) => {
+      if (column.isColumnGroup) {
+        flattenColumns.push.apply(flattenColumns, column.columns);
+      } else {
+        flattenColumns.push(column);
+      }
+    });
+
+    return flattenColumns;
+  }
+
+  updateElsHeight() {
+    if (!this.table.$ready) return Vue.nextTick(() => this.updateElsHeight());
+    const { headerWrapper, appendWrapper, footerWrapper } = this.table.$refs;
+    this.appendHeight = appendWrapper ? appendWrapper.offsetHeight : 0;
+
+    if (this.showHeader && !headerWrapper) return;
+
+    // fix issue (https://github.com/ElemeFE/element/pull/16956)
+    const headerTrElm = headerWrapper ? headerWrapper.querySelector('.el-table__header tr') : null;
+    const noneHeader = this.headerDisplayNone(headerTrElm);
+
+    const headerHeight = this.headerHeight = !this.showHeader ? 0 : headerWrapper.offsetHeight;
+    if (this.showHeader && !noneHeader && headerWrapper.offsetWidth > 0 && (this.table.columns || []).length > 0 && headerHeight < 2) {
+      return Vue.nextTick(() => this.updateElsHeight());
+    }
+    const tableHeight = this.tableHeight = this.table.$el.clientHeight;
+    const footerHeight = this.footerHeight = footerWrapper ? footerWrapper.offsetHeight : 0;
+    if (this.height !== null) {
+      this.bodyHeight = tableHeight - headerHeight - footerHeight + (footerWrapper ? 1 : 0);
+    }
+    this.fixedBodyHeight = this.scrollX ? (this.bodyHeight - this.gutterWidth) : this.bodyHeight;
+
+    const noData = !(this.store.states.data && this.store.states.data.length);
+    this.viewportHeight = this.scrollX ? tableHeight - (noData ? 0 : this.gutterWidth) : tableHeight;
+    this.updateScrollY();
+    this.notifyObservers('scrollable');
+  }
+
+  headerDisplayNone(elm) {
+    if (!elm) return true;
+    let headerChild = elm;
+    while (headerChild.tagName !== 'DIV') {
+      if (getComputedStyle(headerChild).display === 'none') {
+        return true;
+      }
+      headerChild = headerChild.parentElement;
+    }
+    return false;
+  }
+
+  updateColumnsWidth() {
+    if (Vue.prototype.$isServer) return;
+    const fit = this.fit;
+    const bodyWidth = this.table.$el.clientWidth;
+    let bodyMinWidth = 0;
+
+    const flattenColumns = this.getFlattenColumns();
+    let flexColumns = flattenColumns.filter((column) => typeof column.width !== 'number');
+
+    flattenColumns.forEach((column) => { // Clean those columns whose width changed from flex to unflex
+      if (typeof column.width === 'number' && column.realWidth) column.realWidth = null;
+    });
+
+    if (flexColumns.length > 0 && fit) {
+      flattenColumns.forEach((column) => {
+        bodyMinWidth += column.width || column.minWidth || 80;
+      });
+
+      const scrollYWidth = this.scrollY ? this.gutterWidth : 0;
+
+      if (bodyMinWidth <= bodyWidth - scrollYWidth) { // DON'T HAVE SCROLL BAR
+        this.scrollX = false;
+
+        const totalFlexWidth = bodyWidth - scrollYWidth - bodyMinWidth;
+
+        if (flexColumns.length === 1) {
+          flexColumns[0].realWidth = (flexColumns[0].minWidth || 80) + totalFlexWidth;
+        } else {
+          const allColumnsWidth = flexColumns.reduce((prev, column) => prev + (column.minWidth || 80), 0);
+          const flexWidthPerPixel = totalFlexWidth / allColumnsWidth;
+          let noneFirstWidth = 0;
+
+          flexColumns.forEach((column, index) => {
+            if (index === 0) return;
+            const flexWidth = Math.floor((column.minWidth || 80) * flexWidthPerPixel);
+            noneFirstWidth += flexWidth;
+            column.realWidth = (column.minWidth || 80) + flexWidth;
+          });
+
+          flexColumns[0].realWidth = (flexColumns[0].minWidth || 80) + totalFlexWidth - noneFirstWidth;
+        }
+      } else { // HAVE HORIZONTAL SCROLL BAR
+        this.scrollX = true;
+        flexColumns.forEach(function(column) {
+          column.realWidth = column.minWidth;
+        });
+      }
+
+      this.bodyWidth = Math.max(bodyMinWidth, bodyWidth);
+      this.table.resizeState.width = this.bodyWidth;
+    } else {
+      flattenColumns.forEach((column) => {
+        if (!column.width && !column.minWidth) {
+          column.realWidth = 80;
+        } else {
+          column.realWidth = column.width || column.minWidth;
+        }
+
+        bodyMinWidth += column.realWidth;
+      });
+      this.scrollX = bodyMinWidth > bodyWidth;
+
+      this.bodyWidth = bodyMinWidth;
+    }
+
+    const fixedColumns = this.store.states.fixedColumns;
+
+    if (fixedColumns.length > 0) {
+      let fixedWidth = 0;
+      fixedColumns.forEach(function(column) {
+        fixedWidth += column.realWidth || column.width;
+      });
+
+      this.fixedWidth = fixedWidth;
+    }
+
+    const rightFixedColumns = this.store.states.rightFixedColumns;
+    if (rightFixedColumns.length > 0) {
+      let rightFixedWidth = 0;
+      rightFixedColumns.forEach(function(column) {
+        rightFixedWidth += column.realWidth || column.width;
+      });
+
+      this.rightFixedWidth = rightFixedWidth;
+    }
+
+    this.notifyObservers('columns');
+  }
+
+  addObserver(observer) {
+    this.observers.push(observer);
+  }
+
+  removeObserver(observer) {
+    const index = this.observers.indexOf(observer);
+    if (index !== -1) {
+      this.observers.splice(index, 1);
+    }
+  }
+
+  notifyObservers(event) {
+    const observers = this.observers;
+    observers.forEach((observer) => {
+      switch (event) {
+        case 'columns':
+          observer.onColumnsChange(this);
+          break;
+        case 'scrollable':
+          observer.onScrollableChange(this);
+          break;
+        default:
+          throw new Error(`Table Layout don't have event ${event}.`);
+      }
+    });
+  }
+}
+
+export default TableLayout;

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

@@ -0,0 +1,101 @@
+import ElCheckbox from 'element-ui/packages/checkbox';
+export default {
+  name: 'ElTableRow',
+  props: [
+    'columns',
+    'row',
+    'index',
+    'isSelected',
+    'isExpanded',
+    'store',
+    'context',
+    'firstDefaultColumnIndex',
+    'treeRowData',
+    'treeIndent',
+    'columnsHidden',
+    'getSpan',
+    'getColspanRealWidth',
+    'getCellStyle',
+    'getCellClass',
+    'handleCellMouseLeave',
+    'handleCellMouseEnter',
+    'fixed'
+  ],
+  components: {
+    ElCheckbox
+  },
+  render() {
+    const {
+      columns,
+      row,
+      index: $index,
+      store,
+      context,
+      firstDefaultColumnIndex,
+      treeRowData,
+      treeIndent,
+      columnsHidden = [],
+      isSelected,
+      isExpanded
+    } = this;
+
+    return (
+      <tr>
+        {
+          columns.map((column, cellIndex) => {
+            const { rowspan, colspan } = this.getSpan(row, column, $index, cellIndex);
+            if (!rowspan || !colspan) {
+              return null;
+            }
+            const columnData = { ...column };
+            columnData.realWidth = this.getColspanRealWidth(columns, colspan, cellIndex);
+            const data = {
+              store,
+              isSelected,
+              isExpanded,
+              _self: context,
+              column: columnData,
+              row,
+              $index
+            };
+            if (cellIndex === firstDefaultColumnIndex && treeRowData) {
+              data.treeNode = {
+                indent: treeRowData.level * treeIndent,
+                level: treeRowData.level
+              };
+              if (typeof treeRowData.expanded === 'boolean') {
+                data.treeNode.expanded = treeRowData.expanded;
+                // 表明是懒加载
+                if ('loading' in treeRowData) {
+                  data.treeNode.loading = treeRowData.loading;
+                }
+                if ('noLazyChildren' in treeRowData) {
+                  data.treeNode.noLazyChildren = treeRowData.noLazyChildren;
+                }
+              }
+            }
+            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,
+                    this.$createElement,
+                    data,
+                    columnsHidden[cellIndex]
+                  )
+                }
+              </td>
+            );
+          })
+        }
+      </tr>
+    );
+  }
+};