vxe-table 3.13.6 → 3.13.8

package/lib/index.umd.js

@@ -2220,7 +2220,7 @@ function getClass(property, params) {
 ;// CONCATENATED MODULE: ./packages/ui/index.ts
 
 
-const version = "3.13.6";
+const version = "3.13.8";
 core_.VxeUI.version = version;
 core_.VxeUI.tableVersion = version;
 core_.VxeUI.setConfig({
@@ -2843,7 +2843,7 @@ function isNodeElement(elem) {
 const {
   log: log_log
 } = core_.VxeUI;
-const log_version = `table v${"3.13.6"}`;
+const log_version = `table v${"3.13.8"}`;
 const warnLog = log_log.create('warn', log_version);
 const errLog = log_log.create('error', log_version);
 ;// CONCATENATED MODULE: ./packages/table/src/columnInfo.ts
@@ -10325,16 +10325,16 @@ const Methods = {
       actived
     } = editStore;
     const {
-      refTableMenu,
-      filterWrapper,
       customWrapper,
       refValidTooltip
     } = $refs;
+    const tableFilter = $refs.refTableFilter;
+    const tableMenu = $refs.refTableMenu;
     // 筛选
-    if (filterWrapper) {
+    if (tableFilter) {
       if (getEventTargetNode(evnt, $el, 'vxe-cell--filter').flag) {
         // 如果点击了筛选按钮
-      } else if (getEventTargetNode(evnt, filterWrapper.$el).flag) {
+      } else if (getEventTargetNode(evnt, tableFilter.$el).flag) {
         // 如果点击筛选容器
       } else {
         if (!getEventTargetNode(evnt, document.body, 'vxe-table--ignore-clear').flag) {
@@ -10408,7 +10408,7 @@ const Methods = {
         }
       }
     } else if (mouseConfig) {
-      if (!getEventTargetNode(evnt, $el).flag && !($xegrid && getEventTargetNode(evnt, $xegrid.$el).flag) && !(refTableMenu && getEventTargetNode(evnt, refTableMenu.$el).flag) && !($toolbar && getEventTargetNode(evnt, $toolbar.$el).flag)) {
+      if (!getEventTargetNode(evnt, $el).flag && !($xegrid && getEventTargetNode(evnt, $xegrid.$el).flag) && !(tableMenu && getEventTargetNode(evnt, tableMenu.$el).flag) && !($toolbar && getEventTargetNode(evnt, $toolbar.$el).flag)) {
         if (this.clearSelected) {
           this.clearSelected();
         }
@@ -10429,7 +10429,7 @@ const Methods = {
       }
     }
     // 如果配置了快捷菜单且，点击了其他地方则关闭
-    if (ctxMenuStore.visible && refTableMenu && !getEventTargetNode(evnt, refTableMenu.$el).flag) {
+    if (ctxMenuStore.visible && tableMenu && !getEventTargetNode(evnt, tableMenu.$el).flag) {
       this.closeMenu();
     }
     const isActivated = getEventTargetNode(evnt, ($xegrid || this).$el).flag;
@@ -12011,7 +12011,7 @@ const Methods = {
     const rowid = getRowid(this, row);
     this.clearHoverRow();
     if ($el) {
-      external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().arrayEach($el.querySelectorAll(`[rowid="${rowid}"]`), elem => addClass(elem, 'row--hover'));
+      external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().arrayEach($el.querySelectorAll(`.vxe-body--row[rowid="${rowid}"]`), elem => addClass(elem, 'row--hover'));
     }
     this.hoverRow = row;
   },
@@ -19870,6 +19870,9 @@ const {
      * @param {Object} params 参数
      */
     triggerFilterEvent(evnt, column, params) {
+      const $xeTable = this;
+      const reactData = $xeTable;
+      const internalData = $xeTable;
       const {
         filterStore
       } = this;
@@ -19877,112 +19880,115 @@ const {
         filterStore.visible = false;
       } else {
         const {
-          target: targetElem,
-          pageX
-        } = evnt;
-        const {
-          filters,
-          filterMultiple,
-          filterRender
-        } = column;
-        const compConf = isEnableConf(filterRender) ? mixin_renderer.get(filterRender.name) : null;
-        const filterRecoverMethod = column.filterRecoverMethod || (compConf ? compConf.tableFilterRecoverMethod || compConf.filterRecoverMethod : null);
+          initStore,
+          filterStore
+        } = reactData;
         const {
-          visibleWidth
-        } = getDomNode();
-        Object.assign(filterStore, {
-          args: params,
-          multiple: filterMultiple,
-          options: filters,
-          column,
-          style: null,
-          visible: true
-        });
-        // 复原状态
-        filterStore.options.forEach(option => {
+          elemStore
+        } = internalData;
+        if (filterStore.column === column && filterStore.visible) {
+          filterStore.visible = false;
+        } else {
           const {
-            _checked,
-            checked
-          } = option;
-          option._checked = checked;
-          if (!checked && _checked !== checked) {
-            if (filterRecoverMethod) {
-              filterRecoverMethod({
-                option,
-                column,
-                $table: this
-              });
-            }
-          }
-        });
-        this.checkFilterOptions();
-        this.initStore.filter = true;
-        this.$nextTick(() => {
+            clientY,
+            pageX
+          } = evnt;
+          const el = $xeTable.$refs.refElem;
+          const tableRect = el.getBoundingClientRect();
+          const targetElem = evnt.target;
           const {
-            $refs
-          } = this;
+            visibleWidth
+          } = getDomNode();
           const {
-            refTableHeader,
-            refTableBody,
-            filterWrapper
-          } = $refs;
-          const bodyElem = refTableBody.$el;
-          const headerElem = refTableHeader ? refTableHeader.$el : null;
-          if (!bodyElem) {
-            return;
-          }
-          const filterWrapperElem = filterWrapper.$el;
-          if (!filterWrapperElem) {
-            return;
-          }
-          const filterWidth = filterWrapperElem.offsetWidth;
-          const filterHeight = filterWrapperElem.offsetHeight;
-          const filterHeadElem = filterWrapperElem.querySelector('.vxe-table--filter-header');
-          const filterFootElem = filterWrapperElem.querySelector('.vxe-table--filter-footer');
-          const centerWidth = filterWidth / 2;
-          const minMargin = 10;
-          const maxLeft = bodyElem.clientWidth - filterWidth - minMargin;
-          let left, right;
-          const style = {
-            top: `${targetElem.offsetTop + targetElem.offsetParent.offsetTop + targetElem.offsetHeight}px`
-          };
-          // 判断面板不能大于表格高度
-          let maxHeight = null;
-          const bodyHeight = bodyElem.clientHeight - (headerElem ? headerElem.clientHeight / 2 : 0);
-          if (filterHeight >= bodyHeight) {
-            maxHeight = Math.max(40, bodyHeight - (filterFootElem ? filterFootElem.offsetHeight : 0) - (filterHeadElem ? filterHeadElem.offsetHeight : 0));
-          }
-          if (column.fixed === 'left') {
-            left = targetElem.offsetLeft + targetElem.offsetParent.offsetLeft - centerWidth;
-          } else if (column.fixed === 'right') {
-            right = targetElem.offsetParent.offsetWidth - targetElem.offsetLeft + (targetElem.offsetParent.offsetParent.offsetWidth - targetElem.offsetParent.offsetLeft) - column.renderWidth - centerWidth;
-          } else {
-            left = targetElem.offsetLeft + targetElem.offsetParent.offsetLeft - centerWidth - bodyElem.scrollLeft;
-          }
-          if (left) {
-            const overflowWidth = pageX + filterWidth - centerWidth + minMargin - visibleWidth;
-            if (overflowWidth > 0) {
-              left -= overflowWidth;
+            filters,
+            filterMultiple,
+            filterRender
+          } = column;
+          const compConf = isEnableConf(filterRender) ? mixin_renderer.get(filterRender.name) : null;
+          const frMethod = column.filterRecoverMethod || (compConf ? compConf.tableFilterRecoverMethod || compConf.filterRecoverMethod : null);
+          internalData._currFilterParams = params;
+          Object.assign(filterStore, {
+            multiple: filterMultiple,
+            options: filters,
+            column,
+            style: null
+          });
+          // 复原状态
+          filterStore.options.forEach(option => {
+            const {
+              _checked,
+              checked
+            } = option;
+            option._checked = checked;
+            if (!checked && _checked !== checked) {
+              if (frMethod) {
+                frMethod({
+                  option,
+                  column,
+                  $table: $xeTable
+                });
+              }
             }
-            style.left = `${Math.min(maxLeft, Math.max(minMargin, left))}px`;
-          } else if (right) {
-            const overflowWidth = pageX + filterWidth - centerWidth + minMargin - visibleWidth;
-            if (overflowWidth > 0) {
-              right += overflowWidth;
+          });
+          this.checkFilterOptions();
+          filterStore.visible = true;
+          initStore.filter = true;
+          $xeTable.$nextTick(() => {
+            const headerScrollElem = getRefElem(elemStore['main-header-scroll']);
+            if (!headerScrollElem) {
+              return;
             }
-            style.right = `${Math.max(minMargin, right)}px`;
-          }
-          filterStore.style = style;
-          filterStore.maxHeight = maxHeight;
-        });
+            const tableFilter = $xeTable.$refs.refTableFilter;
+            const filterWrapperElem = tableFilter ? tableFilter.$el : null;
+            if (!filterWrapperElem) {
+              return;
+            }
+            const filterWidth = filterWrapperElem.offsetWidth;
+            const filterHeadElem = filterWrapperElem.querySelector('.vxe-table--filter-header');
+            const filterFootElem = filterWrapperElem.querySelector('.vxe-table--filter-footer');
+            const centerWidth = filterWidth / 2;
+            const minMargin = 10;
+            const maxLeft = el.clientWidth - filterWidth - minMargin;
+            let left, right;
+            const thEl = targetElem.offsetParent;
+            const trEl = thEl.offsetParent;
+            const style = {
+              top: `${targetElem.offsetTop + thEl.offsetTop + targetElem.offsetHeight}px`
+            };
+            // 判断面板不能大于表格高度
+            const maxHeight = Math.max(40, el.clientHeight - (clientY - tableRect.y) - (filterHeadElem ? filterHeadElem.clientHeight : 0) - (filterFootElem ? filterFootElem.clientHeight : 0) - 14);
+            if (column.fixed === 'left') {
+              left = targetElem.offsetLeft + thEl.offsetLeft - centerWidth;
+            } else if (column.fixed === 'right') {
+              right = thEl.offsetWidth - targetElem.offsetLeft + (trEl.offsetWidth - trEl.offsetLeft) - column.renderWidth - centerWidth;
+            } else {
+              left = targetElem.offsetLeft + thEl.offsetLeft - centerWidth - headerScrollElem.scrollLeft;
+            }
+            if (left) {
+              const overflowWidth = pageX + filterWidth - centerWidth + minMargin - visibleWidth;
+              if (overflowWidth > 0) {
+                left -= overflowWidth;
+              }
+              style.left = `${Math.min(maxLeft, Math.max(minMargin, left))}px`;
+            } else if (right) {
+              const overflowWidth = pageX + filterWidth - centerWidth + minMargin - visibleWidth;
+              if (overflowWidth > 0) {
+                right += overflowWidth;
+              }
+              style.right = `${Math.max(minMargin, right)}px`;
+            }
+            filterStore.style = style;
+            filterStore.maxHeight = maxHeight;
+          });
+        }
+        $xeTable.dispatchEvent('filter-visible', {
+          column,
+          field: column.field,
+          property: column.field,
+          filterList: $xeTable.getCheckedFilters(),
+          visible: filterStore.visible
+        }, evnt);
       }
-      this.emitEvent('filter-visible', {
-        column,
-        field: column.field,
-        property: column.field,
-        filterList: this.getCheckedFilters(),
-        visible: filterStore.visible
-      }, evnt);
     },
     handleFilterConfirmFilter(evnt) {
       const $xeTable = this;
@@ -20270,6 +20276,7 @@ const {
       const {
         selected
       } = editStore;
+      const tableFilter = $xeTable.$refs.refTableFilter;
       const layoutList = ['header', 'body', 'footer'];
       if (isEnableConf(menuConfig) || contextMenu) {
         if (ctxMenuStore.visible && $refs.refTableMenu && getEventTargetNode(evnt, $refs.refTableMenu.$el).flag) {
@@ -20355,7 +20362,7 @@ const {
           }
         }
       }
-      if ($refs.filterWrapper && !getEventTargetNode(evnt, $refs.filterWrapper.$el).flag) {
+      if (tableFilter && !getEventTargetNode(evnt, tableFilter.$el).flag) {
         this.closeFilter();
       }
       this.closeMenu();
@@ -20999,7 +21006,7 @@ function handleClearEdit($xeTable, evnt, targetRow) {
   }
   return $xeTable.$nextTick().then(() => $xeTable.updateCellAreas());
 }
-function handleEditActive($xeTable, params, evnt, isFocus) {
+function handleEditActive($xeTable, params, evnt, isFocus, isPos) {
   const props = $xeTable;
   const reactData = $xeTable;
   const {
@@ -21118,7 +21125,7 @@ function handleEditActive($xeTable, params, evnt, isFocus) {
         column.renderHeight = cell.offsetHeight;
         actived.args = params;
         actived.column = column;
-        if (isFocus) {
+        if (isPos) {
           setTimeout(() => {
             $xeTable.handleFocus(params, evnt);
           });
@@ -21149,7 +21156,7 @@ function handleEditCell($xeTable, row, fieldOrColumn, isPos) {
           columnIndex: $xeTable.getColumnIndex(column),
           cell,
           $table: $xeTable
-        }, null, false);
+        }, null, isPos, isPos);
         internalData._lastCallTime = Date.now();
       }
       return $xeTable.$nextTick();
@@ -21469,7 +21476,7 @@ function handleEditCell($xeTable, row, fieldOrColumn, isPos) {
      */
     handleEdit(params, evnt) {
       const $xeTable = this;
-      return handleEditActive($xeTable, params, evnt, true);
+      return handleEditActive($xeTable, params, evnt, true, true);
     },
     /**
      * @deprecated
@@ -21625,10 +21632,12 @@ function handleEditCell($xeTable, row, fieldOrColumn, isPos) {
     _setEditRow(row, fieldOrColumn) {
       const $xeTable = this;
       let column = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().find(this.visibleColumn, column => isEnableConf(column.editRender));
+      let isPos = false;
       if (fieldOrColumn) {
+        isPos = true;
         column = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isString(fieldOrColumn) ? this.getColumnByField(fieldOrColumn) : fieldOrColumn;
       }
-      return handleEditCell($xeTable, row, column, false);
+      return handleEditCell($xeTable, row, column, isPos);
     },
     _setActiveCell(row, fieldOrColumn) {
       if (true) {
@@ -23021,7 +23030,7 @@ function handleExportAndPrint($xeTable, options, isPrint) {
     isMerge: hasMerge,
     useStyle: true,
     current: 'current',
-    modes: ['current', 'selected', 'empty'].concat(proxyOpts.ajax && proxyOpts.ajax.queryAll ? ['all'] : [])
+    modes: (proxyOpts.ajax && proxyOpts.ajax.queryAll ? ['all'] : []).concat(['current', 'selected', 'empty'])
   }, options);
   const types = defOpts.types || external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().keys(exportOpts._typeMaps);
   const modes = defOpts.modes || [];
@@ -23213,7 +23222,7 @@ const convertToRows = originColumns => {
         isMerge: hasMerge,
         useStyle: true,
         current: 'current',
-        modes: ['current', 'selected', 'empty'].concat(proxyOpts.ajax && proxyOpts.ajax.queryAll ? ['all'] : []),
+        modes: (proxyOpts.ajax && proxyOpts.ajax.queryAll ? ['all'] : []).concat(['current', 'selected', 'empty']),
         download: true,
         type: 'csv'
         // filename: '',
@@ -26961,7 +26970,7 @@ function renderBody(h, $xeTable) {
      */
     initStore.filter ? h(filter_panel, {
       key: 'tf',
-      ref: 'filterWrapper',
+      ref: 'refTableFilter',
       props: {
         filterStore
       }
@@ -30834,7 +30843,8 @@ const Toolbar = VxeToolbar;
     },
     button: {
       confirm: '确认',
-      cancel: '取消'
+      cancel: '取消',
+      clear: '清除'
     },
     filter: {
       search: '搜索'