umy-ui-table 1.2.0

package/packages/tooltip/src/main.js

@@ -0,0 +1,241 @@
+import Popper from '../../tools/utils/vue-popper';
+import debounce from 'throttle-debounce/debounce';
+import { addClass, removeClass, on, off } from '../../tools/utils/dom';
+import { generateId } from '../../tools/utils/util';
+import Vue from 'vue';
+
+export default {
+  name: 'ElTooltip',
+
+  mixins: [Popper],
+
+  props: {
+    openDelay: {
+      type: Number,
+      default: 0
+    },
+    disabled: Boolean,
+    manual: Boolean,
+    effect: {
+      type: String,
+      default: 'dark'
+    },
+    arrowOffset: {
+      type: Number,
+      default: 0
+    },
+    popperClass: String,
+    content: String,
+    visibleArrow: {
+      default: true
+    },
+    transition: {
+      type: String,
+      default: 'el-fade-in-linear'
+    },
+    popperOptions: {
+      default() {
+        return {
+          boundariesPadding: 10,
+          gpuAcceleration: false
+        };
+      }
+    },
+    enterable: {
+      type: Boolean,
+      default: true
+    },
+    hideAfter: {
+      type: Number,
+      default: 0
+    },
+    tabindex: {
+      type: Number,
+      default: 0
+    }
+  },
+
+  data() {
+    return {
+      tooltipId: `el-tooltip-${generateId()}`,
+      timeoutPending: null,
+      focusing: false
+    };
+  },
+  beforeCreate() {
+    if (this.$isServer) return;
+
+    this.popperVM = new Vue({
+      data: { node: '' },
+      render(h) {
+        return this.node;
+      }
+    }).$mount();
+
+    this.debounceClose = debounce(200, () => this.handleClosePopper());
+  },
+
+  render(h) {
+    if (this.popperVM) {
+      this.popperVM.node = (
+        <transition
+          name={ this.transition }
+          onAfterLeave={ this.doDestroy }>
+          <div
+            onMouseleave={ () => { this.setExpectedState(false); this.debounceClose(); } }
+            onMouseenter= { () => { this.setExpectedState(true); } }
+            ref="popper"
+            role="tooltip"
+            id={this.tooltipId}
+            aria-hidden={ (this.disabled || !this.showPopper) ? 'true' : 'false' }
+            v-show={!this.disabled && this.showPopper}
+            class={
+              ['el-tooltip__popper', 'is-' + this.effect, this.popperClass]
+            }>
+            { this.$slots.content || this.content }
+          </div>
+        </transition>);
+    }
+
+    const firstElement = this.getFirstElement();
+    if (!firstElement) return null;
+
+    const data = firstElement.data = firstElement.data || {};
+    data.staticClass = this.addTooltipClass(data.staticClass);
+
+    return firstElement;
+  },
+
+  mounted() {
+    this.referenceElm = this.$el;
+    if (this.$el.nodeType === 1) {
+      this.$el.setAttribute('aria-describedby', this.tooltipId);
+      this.$el.setAttribute('tabindex', this.tabindex);
+      on(this.referenceElm, 'mouseenter', this.show);
+      on(this.referenceElm, 'mouseleave', this.hide);
+      on(this.referenceElm, 'focus', () => {
+        if (!this.$slots.default || !this.$slots.default.length) {
+          this.handleFocus();
+          return;
+        }
+        const instance = this.$slots.default[0].componentInstance;
+        if (instance && instance.focus) {
+          instance.focus();
+        } else {
+          this.handleFocus();
+        }
+      });
+      on(this.referenceElm, 'blur', this.handleBlur);
+      on(this.referenceElm, 'click', this.removeFocusing);
+    }
+    // fix issue https://github.com/ElemeFE/element/issues/14424
+    if (this.value && this.popperVM) {
+      this.popperVM.$nextTick(() => {
+        if (this.value) {
+          this.updatePopper();
+        }
+      });
+    }
+  },
+  watch: {
+    focusing(val) {
+      if (val) {
+        addClass(this.referenceElm, 'focusing');
+      } else {
+        removeClass(this.referenceElm, 'focusing');
+      }
+    }
+  },
+  methods: {
+    show() {
+      this.setExpectedState(true);
+      this.handleShowPopper();
+    },
+
+    hide() {
+      this.setExpectedState(false);
+      this.debounceClose();
+    },
+    handleFocus() {
+      this.focusing = true;
+      this.show();
+    },
+    handleBlur() {
+      this.focusing = false;
+      this.hide();
+    },
+    removeFocusing() {
+      this.focusing = false;
+    },
+
+    addTooltipClass(prev) {
+      if (!prev) {
+        return 'el-tooltip';
+      } else {
+        return 'el-tooltip ' + prev.replace('el-tooltip', '');
+      }
+    },
+
+    handleShowPopper() {
+      if (!this.expectedState || this.manual) return;
+      clearTimeout(this.timeout);
+      this.timeout = setTimeout(() => {
+        this.showPopper = true;
+      }, this.openDelay);
+
+      if (this.hideAfter > 0) {
+        this.timeoutPending = setTimeout(() => {
+          this.showPopper = false;
+        }, this.hideAfter);
+      }
+    },
+
+    handleClosePopper() {
+      if (this.enterable && this.expectedState || this.manual) return;
+      clearTimeout(this.timeout);
+
+      if (this.timeoutPending) {
+        clearTimeout(this.timeoutPending);
+      }
+      this.showPopper = false;
+
+      if (this.disabled) {
+        this.doDestroy();
+      }
+    },
+
+    setExpectedState(expectedState) {
+      if (expectedState === false) {
+        clearTimeout(this.timeoutPending);
+      }
+      this.expectedState = expectedState;
+    },
+
+    getFirstElement() {
+      const slots = this.$slots.default;
+      if (!Array.isArray(slots)) return null;
+      let element = null;
+      for (let index = 0; index < slots.length; index++) {
+        if (slots[index] && slots[index].tag) {
+          element = slots[index];
+        };
+      }
+      return element;
+    }
+  },
+
+  beforeDestroy() {
+    this.popperVM && this.popperVM.$destroy();
+  },
+
+  destroyed() {
+    const reference = this.referenceElm;
+    if (reference.nodeType === 1) {
+      off(reference, 'mouseenter', this.show);
+      off(reference, 'mouseleave', this.hide);
+      off(reference, 'focus', this.handleFocus);
+      off(reference, 'blur', this.handleBlur);
+      off(reference, 'click', this.removeFocusing);
+    }
+  }
+};

package/packages/u-table/index.js

@@ -0,0 +1,4 @@
+import "./revise-el-table-mixins";
+import UTable from "./src/u-table";
+
+export default UTable;

package/packages/u-table/revise-el-table-mixins/index.js

@@ -0,0 +1,10 @@
+import Table from "../../table";
+
+import "./table-extend";
+import tableMixins from "./table.mixins";
+import uTableTreeMixins from "../u-table-tree-mixins/u-table-tree-mixins";
+if (!Table.mixins) {
+  Table.mixins = [];
+}
+Table.mixins.push(tableMixins);
+Table.mixins.push(uTableTreeMixins);

package/packages/u-table/revise-el-table-mixins/table-extend.js

@@ -0,0 +1,60 @@
+import ElTable from "../../../packages/table";
+
+import VirtualTableBodyRender from "./virtual-table-body-render.js";
+
+const ElTableBody = ElTable.components.TableBody; // 表体
+
+// 改变表格数据流
+const oldDataComputed = ElTableBody.computed.data;
+ElTableBody.computed.data = function () {
+  const { table } = this;
+  const tableData = oldDataComputed.call(this);
+  if (table.useVirtual) {
+    return tableData.slice(table.start, table.end);
+  } else {
+    return tableData;
+  }
+};
+
+// const oldHoverRowHandler = ElTableBody.watch && ElTableBody.watch['store.states.hoverRow']
+// if (oldHoverRowHandler) {
+//   ElTableBody.watch['store.states.hoverRow'] = function (newVal, oldVal) {
+//     if (!this.table.useVirtual) {
+//       oldHoverRowHandler && oldHoverRowHandler.call(this, newVal, oldVal)
+//     }
+//   }
+// }
+
+// 表体行索引
+ElTableBody.methods.getIndex = function (index) {
+  return this.table.start + index;
+};
+
+// 添加表格行样式
+const oldGetRowClassHandler = ElTableBody.methods.getRowClass;
+ElTableBody.methods.getRowClass = function (row, rowIndex) {
+  let classes = oldGetRowClassHandler.call(this, row, rowIndex);
+  // 当表格行被禁止，添加不透明度
+  if (row.disabled) {
+    classes.push("pl-disabled");
+  }
+  // if (this.table.useVirtual && rowIndex === this.store.states.hoverRow && (this.table.rightFixedColumns.length || this.table.fixedColumns.length)) {
+  //   // 兼容element-ui低版本
+  //   if (Object.prototype.toString.call(classes) === '[object Array]') {
+  //     classes.push('hover-row')
+  //   } else if (typeof classes === 'string') {
+  //     classes += ' hover-row'
+  //   }
+  // }
+  return classes;
+};
+
+// 修改ele表体源码 （进行重新渲染）
+const oldRender = ElTableBody.render;
+ElTableBody.render = function (h) {
+  if (this.table.useVirtual) {
+    return VirtualTableBodyRender.call(this, h);
+  } else {
+    return oldRender.call(this, h);
+  }
+};

package/packages/u-table/revise-el-table-mixins/table.mixins.js

@@ -0,0 +1,261 @@
+// 扩展el-table成为pl-table
+import Vue from "vue";
+
+export default {
+  props: {
+    rowHeight: {
+      type: Number,
+      default: 60,
+    },
+    excessRows: {
+      type: Number,
+      default: 3,
+    },
+    rowId: String,
+    headerDragStyle: {
+      type: Boolean,
+      default: false,
+    },
+    tooltipPlacement: {
+      default: "top",
+      type: String,
+    },
+    useVirtual: {
+      type: Boolean,
+      default: false,
+    },
+    // 大数据下是否更改全选框，单选框卡顿问题
+    bigDataCheckbox: {
+      type: Boolean,
+      default: false,
+    },
+    fixedColumnsRoll: {
+      type: Boolean,
+      default: false,
+    },
+    showHeaderOverflow: { type: [Boolean, String], default: null }, // 设置表头所有内容过长时显示为省略号
+    showBodyOverflow: { type: [Boolean, String], default: null }, // 设置表体所有内容过长时显示为省略号
+    selectTrClass: String, //  如果当前行被选中了 type类型为selection，就给当前行给个类样式
+    dataChangesScrollTop: Boolean, // 数据变化滚动到顶部
+  },
+  data() {
+    return {
+      scrollTop: 0,
+      scrollLeft: 0,
+      innerTop: 0,
+      start: 0,
+      end: 0,
+      judgeFlse: false,
+    };
+  },
+  computed: {
+    visibleCount() {
+      return Math.ceil(parseFloat(this.height || this.maxHeight) / this.rowHeight);
+    },
+
+    virtualBodyHeight() {
+      const { data } = this.store.states;
+      return data ? data.length * this.rowHeight : 0;
+    },
+  },
+  watch: {
+    scrollTop: {
+      immediate: true,
+      handler(top) {
+        if (parseFloat(top) <= 0) {
+          this.scrollTop = 0;
+        }
+        this.computeScrollToRow(top);
+      },
+    },
+
+    useVirtual: {
+      immediate: true,
+      handler(newVal) {
+        // 把当前状态存入store.states里面
+        this.store.states.useVirtual = newVal;
+        this.computeScrollToRow(this.scrollTop);
+      },
+    },
+
+    bigDataCheckbox: {
+      immediate: true,
+      handler(newVal) {
+        // 把当前状态存入store.states里面
+        this.store.states.bigDataCheckbox = newVal;
+      },
+    },
+
+    virtualBodyHeight() {
+      if (this.useVirtual) setTimeout(this.doLayout, 10);
+    },
+
+    height: {
+      immediate: true,
+      handler(value) {
+        if (this.useVirtual) {
+          this.layout.setHeight(value);
+          this.computeScrollToRow(this.scrollTop);
+        }
+      },
+    },
+
+    maxHeight: {
+      immediate: true,
+      handler(value) {
+        if (this.useVirtual) {
+          this.layout.setMaxHeight(value);
+          this.computeScrollToRow(this.scrollTop);
+        }
+      },
+    },
+
+    data: {
+      immediate: true,
+      handler(value) {
+        if (this.useVirtual) {
+          if (this.rowId) {
+            this.plTreeInit(value);
+          } else {
+            this.store.commit("setData", value);
+          }
+          if (this.dataChangesScrollTop) {
+            this.pagingScrollTop(0, this.scrollLeft);
+          }
+        }
+      },
+    },
+  },
+  mounted() {
+    // 暴露store对象对pl-table
+    this.$parent.newTableStore = this.store;
+    this.bindEvent("bind");
+  },
+  methods: {
+    bindEvent(action) {
+      const tableBodyWrapper = this.$el.querySelector(".el-table__body-wrapper");
+      if (!this.binded && action === "bind") {
+        tableBodyWrapper.addEventListener("scroll", this.handleScroll);
+        this.binded = true;
+      } else if (this.binded && action === "unbind") {
+        tableBodyWrapper.removeEventListener("scroll", this.handleScroll);
+        this.binded = false;
+      }
+    },
+
+    scrollBottom() {
+      const { data } = this.store.states;
+      this.pagingScrollTop(data.length * this.rowHeight);
+    },
+    // 表体滚动到什么位置
+    pagingScrollTop(top = 0, left = 0, type) {
+      if (!this.$refs.bodyWrapper) return Vue.nextTick(() => this.pagingScrollTop(top, left));
+      if (this.$refs.bodyWrapper) {
+        if (type && type === "不倒计时") {
+          this.$nextTick(() => {
+            this.$refs.bodyWrapper.scrollTop = top;
+            this.$refs.bodyWrapper.scrollLeft = left || this.scrollLeft;
+            const bodyScrollHeight = this.visibleCount * this.rowHeight;
+            if (this.virtualBodyHeight < top + bodyScrollHeight) {
+              top = this.virtualBodyHeight - bodyScrollHeight;
+            }
+            this.scrollTop = top;
+            this.scrollLeft = left || this.scrollLeft;
+          });
+        } else {
+          setTimeout(() => {
+            this.$refs.bodyWrapper.scrollTop = top;
+            this.$refs.bodyWrapper.scrollLeft = left || this.scrollLeft;
+            const bodyScrollHeight = this.visibleCount * this.rowHeight;
+            if (this.virtualBodyHeight < top + bodyScrollHeight) {
+              top = this.virtualBodyHeight - bodyScrollHeight;
+            }
+            this.scrollTop = top;
+            this.scrollLeft = left || this.scrollLeft;
+          }, 10);
+        }
+      } else {
+        throw new Error("表格还没加载完毕");
+      }
+    },
+
+    computeScrollToRow(scrollTop) {
+      if (!this.useVirtual) return;
+      let startIndex = parseInt(scrollTop / this.rowHeight);
+
+      const { start, end } = this.getVisibleRange(startIndex);
+
+      this.$parent.position = {
+        start: start,
+        end: end,
+      };
+      this.start = start;
+      this.end = end;
+      this.innerTop = this.start * this.rowHeight;
+    },
+
+    getVisibleRange(expectStart) {
+      const start = expectStart - this.excessRows;
+      return {
+        start: start >= 0 ? start : 0,
+        end: expectStart + this.visibleCount + this.excessRows,
+      };
+    },
+
+    handleScroll(e) {
+      const ele = e.srcElement || e.target;
+      let { scrollTop, scrollLeft } = ele;
+      if (this.useVirtual) {
+        const bodyScrollHeight = this.visibleCount * this.rowHeight;
+        // 解决 滚动时 行hover高亮的问题
+        this.store.states.hoverRow = null;
+        if (this.virtualBodyHeight < scrollTop + bodyScrollHeight) {
+          scrollTop = this.virtualBodyHeight - bodyScrollHeight;
+          this.judgeFlse = true;
+        } else {
+          this.judgeFlse = false;
+        }
+      }
+      this.scrollTop = scrollTop;
+      this.scrollLeft = scrollLeft;
+      // 当表格滚动暴露滚动事件
+      let copyTop = parseFloat(this.scrollTop <= 0) ? 0 : this.scrollTop;
+      const obj = { scrollTop: copyTop, scrollLeft: this.scrollLeft, table: this, judgeFlse: this.judgeFlse };
+      this.$emit("tableBodyScroll", obj, e);
+    },
+    // 设置表格数据
+    reloadData(data) {
+      if (this.rowId && this.useVirtual) {
+        return this.plTreeInit(data);
+      } else {
+        this.store.commit("setData", data);
+      }
+      if (this.dataChangesScrollTop) {
+        this.pagingScrollTop(0, this.scrollLeft);
+      }
+      return this.$nextTick();
+    },
+  },
+  activated() {
+    if (this.useVirtual) {
+      this.bindEvent("bind");
+      if (this.scrollTop || this.scrollLeft) {
+        if (this.judgeFlse) {
+          this.scrollBottom();
+        } else {
+          this.pagingScrollTop(this.scrollTop);
+        }
+      }
+    }
+  },
+  deactivated() {
+    if (this.useVirtual) {
+      this.bindEvent("unbind");
+    }
+  },
+  beforeDestroy() {
+    if (this.useVirtual) {
+      this.bindEvent("unbind");
+    }
+  },
+};

package/packages/u-table/revise-el-table-mixins/virtual-table-body-render.js

@@ -0,0 +1,132 @@
+export default function render(h) {
+  const columnsHidden = this.columns.map((column, index) => this.isColumnHidden(index));
+  let rows = this.data;
+  if (this.store.states.lazy && Object.keys(this.store.states.lazyTreeNodeMap).length) {
+    rows = rows.reduce((prev, item) => {
+      prev.push(item);
+      const rowKey = this.store.table.getRowKey(item);
+      const parent = this.store.states.treeData[rowKey];
+      if (parent && parent.children && parent.hasChildren) {
+        const tmp = [];
+        const traverse = (children) => {
+          if (!children) return;
+          children.forEach((key) => {
+            tmp.push(this.store.states.lazyTreeNodeMap[key]);
+            if (this.store.states.treeData[key]) {
+              traverse(this.store.states.treeData[key].children);
+            }
+          });
+        };
+        traverse(parent.children);
+        prev = prev.concat(tmp);
+      }
+      return prev;
+    }, []);
+  }
+  return (
+    <div
+      style={[{ height: `${this.table.virtualBodyHeight}px` }]}
+      class={["el-table__virtual-wrapper", { "el-table--fixed__virtual-wrapper": this.fixed }]}
+    >
+      <div style={[{ transform: `translateY(${this.table.innerTop}px)` }]}>
+        <table class="el-table__body" cellspacing="0" cellpadding="0" border="0">
+          <colgroup>
+            {this._l(this.columns, (column, cellIndex) =>
+              columnsHidden[cellIndex] && this.fixed ? "" : <col name={column.id} />
+            )}
+          </colgroup>
+          <tbody>
+            {this._l(rows, (row, index) => {
+              const $index = this.getIndex(index);
+              const rowKey = this.table.rowKey ? this.getKeyOfRow(row, $index) : $index;
+              const treeNode = this.treeData && this.treeData[rowKey];
+              const rowClasses = this.getRowClass(row, $index);
+              if (treeNode) {
+                rowClasses.push("el-table__row--level-" + treeNode.level);
+              }
+              const tr = (
+                <tr
+                  v-show={treeNode ? treeNode.display : true}
+                  style={this.rowStyle ? this.getRowStyle(row, $index) : null}
+                  key={rowKey}
+                  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={rowClasses}
+                >
+                  {this._l(this.columns, (column, cellIndex) => {
+                    const { rowspan, colspan } = this.getSpan(row, column, $index, cellIndex);
+                    if (!rowspan || !colspan || (columnsHidden[cellIndex] && this.fixed)) {
+                      return "";
+                    } else {
+                      const columnData = Object.assign({}, column);
+                      if (colspan !== 1) {
+                        columnData.realWidth = columnData.realWidth * colspan;
+                      }
+                      const data = {
+                        store: this.store,
+                        _self: this.context || this.table.$vnode.context,
+                        column: columnData,
+                        row,
+                        $index,
+                      };
+                      if (cellIndex === this.firstDefaultColumnIndex && treeNode) {
+                        data.treeNode = {
+                          hasChildren: treeNode.hasChildren || (treeNode.children && treeNode.children.length),
+                          expanded: treeNode.expanded,
+                          indent: treeNode.level * this.treeIndent,
+                          level: treeNode.level,
+                          loaded: treeNode.loaded,
+                          rowKey,
+                        };
+                      }
+                      return (
+                        <td
+                          style={[
+                            { height: this.table.rowHeight + "px" },
+                            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, data, columnsHidden[cellIndex])}
+                        </td>
+                      );
+                    }
+                  })}
+                </tr>
+              );
+              if (this.hasExpandColumn && this.store.isRowExpanded(row)) {
+                return [
+                  tr,
+                  <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>,
+                ];
+              } else {
+                return tr;
+              }
+            }).concat(
+              <el-tooltip
+                effect={this.table.tooltipEffect}
+                popperClass="plTableTooltip"
+                placement={this.table.tooltipPlacement}
+                ref="tooltip"
+                content={this.tooltipContent}
+              ></el-tooltip>
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}