vxe-table 3.15.1 → 3.15.3

package/lib/index.umd.js

@@ -2220,7 +2220,7 @@ function getClass(property, params) {
 ;// CONCATENATED MODULE: ./packages/ui/index.ts
 
 
-const version = "3.15.1";
+const version = "3.15.3";
 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.15.1"}`;
+const log_version = `table v${"3.15.3"}`;
 const warnLog = log_log.create('warn', log_version);
 const errLog = log_log.create('error', log_version);
 ;// CONCATENATED MODULE: ./packages/table/src/columnInfo.ts
@@ -5507,6 +5507,116 @@ const updateScrollYStatus = ($xeTable, fullData) => {
   reactData.scrollYLoad = scrollYLoad;
   return scrollYLoad;
 };
+/**
+ * 展开与收起树节点
+ * @param rows
+ * @param expanded
+ * @returns
+ */
+function handleBaseTreeExpand($xeTable, rows, expanded) {
+  const reactData = $xeTable;
+  const internalData = $xeTable;
+  const {
+    treeNodeColumn
+  } = reactData;
+  const {
+    fullAllDataRowIdData,
+    tableFullData,
+    treeExpandedMaps,
+    treeExpandLazyLoadedMaps
+  } = internalData;
+  const treeOpts = $xeTable.computeTreeOpts;
+  const {
+    reserve,
+    lazy,
+    accordion,
+    toggleMethod
+  } = treeOpts;
+  const childrenField = treeOpts.children || treeOpts.childrenField;
+  const hasChildField = treeOpts.hasChild || treeOpts.hasChildField;
+  const result = [];
+  const columnIndex = $xeTable.getColumnIndex(treeNodeColumn);
+  const $columnIndex = $xeTable.getVMColumnIndex(treeNodeColumn);
+  const {
+    handleGetRowId
+  } = createHandleGetRowId($xeTable);
+  let validRows = toggleMethod ? rows.filter(row => toggleMethod({
+    $table: $xeTable,
+    expanded,
+    column: treeNodeColumn,
+    columnIndex,
+    $columnIndex,
+    row
+  })) : rows;
+  if (accordion) {
+    validRows = validRows.length ? [validRows[validRows.length - 1]] : [];
+    // 同一级只能展开一个
+    const matchObj = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().findTree(tableFullData, item => item === validRows[0], {
+      children: childrenField
+    });
+    if (matchObj) {
+      matchObj.items.forEach(item => {
+        const rowid = handleGetRowId(item);
+        if (treeExpandedMaps[rowid]) {
+          delete treeExpandedMaps[rowid];
+        }
+      });
+    }
+  }
+  if (expanded) {
+    validRows.forEach(row => {
+      const rowid = handleGetRowId(row);
+      if (!treeExpandedMaps[rowid]) {
+        const rowRest = fullAllDataRowIdData[rowid];
+        if (rowRest) {
+          const isLoad = lazy && row[hasChildField] && !rowRest.treeLoaded && !treeExpandLazyLoadedMaps[rowid];
+          // 是否使用懒加载
+          if (isLoad) {
+            result.push(handleAsyncTreeExpandChilds($xeTable, row));
+          } else {
+            if (row[childrenField] && row[childrenField].length) {
+              treeExpandedMaps[rowid] = row;
+            }
+          }
+        }
+      }
+    });
+  } else {
+    validRows.forEach(item => {
+      const rowid = handleGetRowId(item);
+      if (treeExpandedMaps[rowid]) {
+        delete treeExpandedMaps[rowid];
+      }
+    });
+  }
+  if (reserve) {
+    validRows.forEach(row => handleTreeExpandReserve($xeTable, row, expanded));
+  }
+  reactData.treeExpandedFlag++;
+  return Promise.all(result).then(() => {
+    return $xeTable.recalculate();
+  });
+}
+/**
+ * 虚拟树的展开与收起
+ * @param rows
+ * @param expanded
+ * @returns
+ */
+function handleVirtualTreeExpand($xeTable, rows, expanded) {
+  return handleBaseTreeExpand($xeTable, rows, expanded).then(() => {
+    handleVirtualTreeToList($xeTable);
+    $xeTable.handleTableData();
+    updateAfterDataIndex($xeTable);
+    return $xeTable.$nextTick();
+  }).then(() => {
+    return $xeTable.recalculate(true);
+  }).then(() => {
+    setTimeout(() => {
+      $xeTable.updateCellAreas();
+    }, 30);
+  });
+}
 function updateAfterListIndex($xeTable) {
   const props = $xeTable;
   const internalData = $xeTable;
@@ -8476,7 +8586,11 @@ const Methods = {
       handleReserveStatus($xeTable);
       $xeTable.checkSelectionStatus();
       return new Promise(resolve => {
-        this.$nextTick().then(() => $xeTable.recalculate()).then(() => {
+        this.$nextTick().then(() => handleRecalculateLayout($xeTable, false)).then(() => {
+          calcCellHeight($xeTable);
+          updateRowOffsetTop($xeTable);
+          return handleRecalculateLayout($xeTable, false);
+        }).then(() => {
           let targetScrollLeft = lastScrollLeft;
           let targetScrollTop = lastScrollTop;
           const virtualXOpts = $xeTable.computeVirtualXOpts;
@@ -8489,8 +8603,7 @@ const Methods = {
             targetScrollTop = 0;
           }
           reactData.isRowLoading = false;
-          calcCellHeight($xeTable);
-          updateRowOffsetTop($xeTable);
+          handleRecalculateLayout($xeTable, false);
           // 是否变更虚拟滚动
           if (oldScrollYLoad === sYLoad) {
             restoreScrollLocation($xeTable, targetScrollLeft, targetScrollTop).then(() => {
@@ -12645,6 +12758,12 @@ const Methods = {
     const {
       column: newValue
     } = params;
+    const {
+      trigger
+    } = currentColumnOpts;
+    if (trigger === 'manual') {
+      return;
+    }
     const isChange = oldValue !== newValue;
     if (!beforeRowMethod || beforeRowMethod({
       column: newValue,
@@ -12674,6 +12793,12 @@ const Methods = {
     const {
       row: newValue
     } = params;
+    const {
+      trigger
+    } = currentRowOpts;
+    if (trigger === 'manual') {
+      return;
+    }
     const isChange = oldValue !== newValue;
     if (!beforeRowMethod || beforeRowMethod({
       row: newValue,
@@ -14465,8 +14590,8 @@ const Methods = {
         columnIndex,
         $columnIndex,
         row,
-        rowIndex: this.getRowIndex(row),
-        $rowIndex: this.getVMRowIndex(row)
+        rowIndex: $xeTable.getRowIndex(row),
+        $rowIndex: $xeTable.getVMRowIndex(row)
       })) : rows;
       if (expanded) {
         validRows.forEach(row => {
@@ -14691,7 +14816,8 @@ const Methods = {
     const $xeTable = this;
     const internalData = $xeTable;
     const {
-      treeExpandLazyLoadedMaps
+      treeExpandLazyLoadedMaps,
+      treeEATime
     } = internalData;
     const treeOpts = $xeTable.computeTreeOpts;
     const {
@@ -14700,7 +14826,8 @@ const Methods = {
     } = params;
     const {
       lazy,
-      trigger
+      trigger,
+      accordion
     } = treeOpts;
     if (trigger === 'manual') {
       return;
@@ -14711,7 +14838,17 @@ const Methods = {
       const expanded = !$xeTable.isTreeExpandByRow(row);
       const columnIndex = $xeTable.getColumnIndex(column);
       const $columnIndex = $xeTable.getVMColumnIndex(column);
-      $xeTable.setTreeExpand(row, expanded);
+      if (treeEATime) {
+        clearTimeout(treeEATime);
+      }
+      $xeTable.setTreeExpand(row, expanded).then(() => {
+        if (accordion) {
+          internalData.treeEATime = setTimeout(() => {
+            internalData.treeEATime = undefined;
+            $xeTable.scrollToRow(row);
+          }, 30);
+        }
+      });
       $xeTable.dispatchEvent('toggle-tree-expand', {
         expanded,
         column,
@@ -14751,117 +14888,6 @@ const Methods = {
     });
     return this.setTreeExpand(expandeds, expanded);
   },
-  /**
-   * 默认，展开与收起树节点
-   * @param rows
-   * @param expanded
-   * @returns
-   */
-  handleBaseTreeExpand(rows, expanded) {
-    const $xeTable = this;
-    const reactData = $xeTable;
-    const internalData = $xeTable;
-    const {
-      treeNodeColumn
-    } = reactData;
-    const {
-      fullAllDataRowIdData,
-      tableFullData,
-      treeExpandedMaps,
-      treeExpandLazyLoadedMaps
-    } = internalData;
-    const treeOpts = $xeTable.computeTreeOpts;
-    const {
-      reserve,
-      lazy,
-      accordion,
-      toggleMethod
-    } = treeOpts;
-    const childrenField = treeOpts.children || treeOpts.childrenField;
-    const hasChildField = treeOpts.hasChild || treeOpts.hasChildField;
-    const result = [];
-    const columnIndex = $xeTable.getColumnIndex(treeNodeColumn);
-    const $columnIndex = $xeTable.getVMColumnIndex(treeNodeColumn);
-    const {
-      handleGetRowId
-    } = createHandleGetRowId($xeTable);
-    let validRows = toggleMethod ? rows.filter(row => toggleMethod({
-      $table: $xeTable,
-      expanded,
-      column: treeNodeColumn,
-      columnIndex,
-      $columnIndex,
-      row
-    })) : rows;
-    if (accordion) {
-      validRows = validRows.length ? [validRows[validRows.length - 1]] : [];
-      // 同一级只能展开一个
-      const matchObj = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().findTree(tableFullData, item => item === validRows[0], {
-        children: childrenField
-      });
-      if (matchObj) {
-        matchObj.items.forEach(item => {
-          const rowid = handleGetRowId(item);
-          if (treeExpandedMaps[rowid]) {
-            delete treeExpandedMaps[rowid];
-          }
-        });
-      }
-    }
-    if (expanded) {
-      validRows.forEach(row => {
-        const rowid = handleGetRowId(row);
-        if (!treeExpandedMaps[rowid]) {
-          const rowRest = fullAllDataRowIdData[rowid];
-          if (rowRest) {
-            const isLoad = lazy && row[hasChildField] && !rowRest.treeLoaded && !treeExpandLazyLoadedMaps[rowid];
-            // 是否使用懒加载
-            if (isLoad) {
-              result.push(handleAsyncTreeExpandChilds($xeTable, row));
-            } else {
-              if (row[childrenField] && row[childrenField].length) {
-                treeExpandedMaps[rowid] = row;
-              }
-            }
-          }
-        }
-      });
-    } else {
-      validRows.forEach(item => {
-        const rowid = handleGetRowId(item);
-        if (treeExpandedMaps[rowid]) {
-          delete treeExpandedMaps[rowid];
-        }
-      });
-    }
-    if (reserve) {
-      validRows.forEach(row => handleTreeExpandReserve($xeTable, row, expanded));
-    }
-    reactData.treeExpandedFlag++;
-    return Promise.all(result).then(() => {
-      return $xeTable.recalculate();
-    });
-  },
-  /**
-   * 虚拟树的展开与收起
-   * @param rows
-   * @param expanded
-   * @returns
-   */
-  handleVirtualTreeExpand(rows, expanded) {
-    const $xeTable = this;
-    return this.handleBaseTreeExpand(rows, expanded).then(() => {
-      handleVirtualTreeToList($xeTable);
-      this.handleTableData();
-      updateAfterDataIndex($xeTable);
-    }).then(() => {
-      return this.recalculate();
-    }).then(() => {
-      setTimeout(() => {
-        this.updateCellAreas();
-      }, 30);
-    });
-  },
   /**
    * 设置展开树形节点，二个参数设置这一行展开与否
    * 支持单行
@@ -14870,6 +14896,7 @@ const Methods = {
    * @param {Boolean} expanded 是否展开
    */
   setTreeExpand(rows, expanded) {
+    const $xeTable = this;
     const {
       treeOpts
     } = this;
@@ -14883,9 +14910,9 @@ const Methods = {
       if (rows.length) {
         // 如果为虚拟树
         if (transform) {
-          return this.handleVirtualTreeExpand(rows, expanded);
+          return handleVirtualTreeExpand($xeTable, rows, expanded);
         } else {
-          return this.handleBaseTreeExpand(rows, expanded);
+          return handleBaseTreeExpand($xeTable, rows, expanded);
         }
       }
     }
@@ -15594,7 +15621,8 @@ const Methods = {
       if (isScrollXBig && mouseOpts.area) {
         errLog('vxe.error.notProp', ['mouse-config.area']);
       }
-      $xeTable.$nextTick(() => {
+      calcScrollbar($xeTable);
+      return $xeTable.$nextTick(() => {
         updateStyle($xeTable);
       });
     }
@@ -15713,6 +15741,7 @@ const Methods = {
     if (isScrollYBig && mouseOpts.area) {
       errLog('vxe.error.notProp', ['mouse-config.area']);
     }
+    calcScrollbar($xeTable);
     return $xeTable.$nextTick().then(() => {
       updateStyle($xeTable);
     });
@@ -16237,6 +16266,7 @@ function renderTdColumn(h, _vm, seq, rowid, fixedType, isOptimizeMode, rowLevel,
     showOverflow: allShowOverflow,
     border,
     height,
+    treeConfig,
     cellClassName: allCellClassName,
     cellStyle,
     align: allAlign,
@@ -16277,6 +16307,8 @@ function renderTdColumn(h, _vm, seq, rowid, fixedType, isOptimizeMode, rowLevel,
   const checkboxOpts = $xeTable.computeCheckboxOpts;
   const editOpts = $xeTable.computeEditOpts;
   const tooltipOpts = $xeTable.computeTooltipOpts;
+  const virtualXOpts = $xeTable.computeVirtualXOpts;
+  const virtualYOpts = $xeTable.computeVirtualYOpts;
   const {
     isAllColumnDrag,
     isAllRowDrag
@@ -16480,9 +16512,9 @@ function renderTdColumn(h, _vm, seq, rowid, fixedType, isOptimizeMode, rowLevel,
   let isVNPreEmptyStatus = false;
   if (!isMergeCell) {
     if (!dragRow || getRowid($xeTable, dragRow) !== rowid) {
-      if (scrollYLoad && (_rowIndex < scrollYStore.visibleStartIndex - scrollYStore.preloadSize || _rowIndex > scrollYStore.visibleEndIndex + scrollYStore.preloadSize)) {
+      if (scrollYLoad && !treeConfig && !virtualYOpts.immediate && (_rowIndex < scrollYStore.visibleStartIndex - scrollYStore.preloadSize || _rowIndex > scrollYStore.visibleEndIndex + scrollYStore.preloadSize)) {
         isVNPreEmptyStatus = true;
-      } else if (scrollXLoad && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
+      } else if (scrollXLoad && !virtualXOpts.immediate && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
         isVNPreEmptyStatus = true;
       }
     }
@@ -17155,6 +17187,7 @@ const header_renderRows = (h, _vm, isGroup, isOptimizeMode, cols, $rowIndex) =>
     fullColumnIdData,
     scrollXStore
   } = tableInternalData;
+  const virtualXOpts = $xeTable.computeVirtualXOpts;
   const columnOpts = $xeTable.computeColumnOpts;
   const columnDragOpts = $xeTable.computeColumnDragOpts;
   const cellOpts = $xeTable.computeCellOpts;
@@ -17250,7 +17283,7 @@ const header_renderRows = (h, _vm, isGroup, isOptimizeMode, cols, $rowIndex) =>
     let isVNPreEmptyStatus = false;
     if (!isGroup) {
       if (!dragCol || dragCol.id !== colid) {
-        if (scrollXLoad && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
+        if (scrollXLoad && !column.fixed && !virtualXOpts.immediate && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
           isVNPreEmptyStatus = true;
         }
       }
@@ -17621,10 +17654,12 @@ function footer_renderRows(h, _vm, tableColumn, footerTableData, row, $rowIndex,
     mergeFooterCellMaps,
     scrollXStore
   } = tableInternalData;
+  const virtualXOpts = $xeTable.computeVirtualXOpts;
   const tooltipOpts = $xeTable.computeTooltipOpts;
+  const resizableOpts = $xeTable.resizableOpts;
   const {
     isAllColumnDrag
-  } = $xeTable.resizableOpts;
+  } = resizableOpts;
   const columnOpts = $xeTable.computeColumnOpts;
   const defaultRowHeight = $xeTable.computeDefaultRowHeight;
   const cellOpts = $xeTable.computeCellOpts;
@@ -17750,7 +17785,7 @@ function footer_renderRows(h, _vm, tableColumn, footerTableData, row, $rowIndex,
     const isAutoCellWidth = !column.resizeWidth && (column.minWidth === 'auto' || column.width === 'auto');
     let isVNPreEmptyStatus = false;
     if (!isMergeCell) {
-      if (scrollXLoad && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
+      if (scrollXLoad && !column.fixed && !virtualXOpts.immediate && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
         isVNPreEmptyStatus = true;
       }
     }
@@ -19493,28 +19528,169 @@ const renderPopupPanel = (h, _vm) => {
 const {
   getI18n: filter_panel_getI18n,
   getIcon: filter_panel_getIcon,
-  renderer: panel_renderer
+  renderer: panel_renderer,
+  globalMixins
 } = core_.VxeUI;
+function renderOptions($xeFilterPanel, h, filterRender, compConf) {
+  const props = $xeFilterPanel;
+  const $xeTable = $xeFilterPanel.$xeTable;
+  const tableInternalData = $xeTable;
+  const {
+    filterStore
+  } = props;
+  const {
+    column,
+    multiple,
+    maxHeight
+  } = filterStore;
+  const slots = column ? column.slots : null;
+  const filterSlot = slots ? slots.filter : null;
+  const params = Object.assign({}, tableInternalData._currFilterParams, {
+    $panel: $xeFilterPanel,
+    $table: $xeTable
+  });
+  const rtFilter = compConf ? compConf.renderTableFilter || compConf.renderFilter : null;
+  if (filterSlot) {
+    return [h('div', {
+      class: 'vxe-table--filter-template',
+      style: maxHeight ? {
+        maxHeight: `${maxHeight}px`
+      } : {}
+    }, $xeTable.callSlot(filterSlot, params, h))];
+  } else if (rtFilter) {
+    return [h('div', {
+      class: 'vxe-table--filter-template',
+      style: maxHeight ? {
+        maxHeight: `${maxHeight}px`
+      } : {}
+    }, getSlotVNs(rtFilter.call($xeTable, h, filterRender, params)))];
+  }
+  const isAllChecked = multiple ? filterStore.isAllSelected : !filterStore.options.some(item => item._checked);
+  const isAllIndeterminate = multiple && filterStore.isIndeterminate;
+  return [h('ul', {
+    class: 'vxe-table--filter-header'
+  }, [h('li', {
+    class: ['vxe-table--filter-option', {
+      'is--checked': isAllChecked,
+      'is--indeterminate': isAllIndeterminate
+    }],
+    attrs: {
+      title: filter_panel_getI18n(multiple ? 'vxe.table.allTitle' : 'vxe.table.allFilter')
+    },
+    on: {
+      click: evnt => {
+        $xeFilterPanel.changeAllOption(evnt, !filterStore.isAllSelected);
+      }
+    }
+  }, (multiple ? [h('span', {
+    class: ['vxe-checkbox--icon', isAllIndeterminate ? filter_panel_getIcon().TABLE_CHECKBOX_INDETERMINATE : isAllChecked ? filter_panel_getIcon().TABLE_CHECKBOX_CHECKED : filter_panel_getIcon().TABLE_CHECKBOX_UNCHECKED]
+  })] : []).concat([h('span', {
+    class: 'vxe-checkbox--label'
+  }, filter_panel_getI18n('vxe.table.allFilter'))]))]), h('ul', {
+    class: 'vxe-table--filter-body',
+    style: maxHeight ? {
+      maxHeight: `${maxHeight}px`
+    } : {}
+  }, filterStore.options.map(item => {
+    const isChecked = item._checked;
+    const isIndeterminate = false;
+    return h('li', {
+      class: ['vxe-table--filter-option', {
+        'is--checked': isChecked
+      }],
+      attrs: {
+        title: item.label
+      },
+      on: {
+        click: evnt => {
+          $xeFilterPanel.changeOption(evnt, !item._checked, item);
+        }
+      }
+    }, (multiple ? [h('span', {
+      class: ['vxe-checkbox--icon', isIndeterminate ? filter_panel_getIcon().TABLE_CHECKBOX_INDETERMINATE : isChecked ? filter_panel_getIcon().TABLE_CHECKBOX_CHECKED : filter_panel_getIcon().TABLE_CHECKBOX_UNCHECKED]
+    })] : []).concat([h('span', {
+      class: 'vxe-checkbox--label'
+    }, formatText(item.label, 1))]));
+  }))];
+}
+function renderFooter($xeFilterPanel, h) {
+  const props = $xeFilterPanel;
+  const $xeTable = $xeFilterPanel.$xeTable;
+  const {
+    filterStore
+  } = props;
+  const {
+    column,
+    multiple
+  } = filterStore;
+  const filterOpts = $xeTable.computeFilterOpts;
+  const hasCheckOption = $xeFilterPanel.computeHasCheckOption;
+  const filterRender = column.filterRender;
+  const compConf = isEnableConf(filterRender) ? panel_renderer.get(filterRender.name) : null;
+  const isDisabled = !hasCheckOption && !filterStore.isAllSelected && !filterStore.isIndeterminate;
+  return multiple && (compConf ? !(compConf.showTableFilterFooter === false || compConf.showFilterFooter === false || compConf.isFooter === false) : true) ? [h('div', {
+    class: 'vxe-table--filter-footer'
+  }, [h('button', {
+    class: {
+      'is--disabled': isDisabled
+    },
+    attrs: {
+      disabled: isDisabled
+    },
+    on: {
+      click: $xeFilterPanel.confirmFilter
+    }
+  }, filterOpts.confirmButtonText || filter_panel_getI18n('vxe.table.confirmFilter')), h('button', {
+    on: {
+      click: $xeFilterPanel.resetFilter
+    }
+  }, filterOpts.resetButtonText || filter_panel_getI18n('vxe.table.resetFilter'))])] : [];
+}
 /* harmony default export */ var filter_panel = ({
   name: 'VxeTableFilterPanel',
+  mixins: [globalMixins.sizeMixin],
   props: {
     filterStore: Object
   },
+  inject: {
+    $xeTable: {
+      default: null
+    }
+  },
   computed: {
-    hasCheckOption() {
+    computeHasCheckOption() {
       const {
         filterStore
       } = this;
       return filterStore && filterStore.options.some(option => option.checked);
     }
   },
+  mounted() {
+    const $xeFilterPanel = this;
+    const $xeTable = $xeFilterPanel.$xeTable;
+    const filterOpts = $xeTable.computeFilterOpts;
+    const {
+      transfer
+    } = filterOpts;
+    const el = this.$refs.refElem;
+    if (transfer && el) {
+      document.body.appendChild(el);
+    }
+  },
+  beforeDestroy() {
+    const el = this.$refs.refElem;
+    if (el && el.parentNode) {
+      el.parentNode.removeChild(el);
+    }
+  },
   render(h) {
-    const $panel = this;
-    const $xeTable = this.$parent;
+    const $xeFilterPanel = this;
+    const props = $xeFilterPanel;
+    const $xeTable = $xeFilterPanel.$xeTable;
     const tableInternalData = $xeTable;
     const {
       filterStore
-    } = this;
+    } = props;
     const {
       visible,
       multiple,
@@ -19524,137 +19700,27 @@ const {
     const compConf = isEnableConf(filterRender) ? panel_renderer.get(filterRender.name) : null;
     const filterClassName = compConf ? compConf.tableFilterClassName || compConf.filterClassName : '';
     const params = Object.assign({}, tableInternalData._currFilterParams, {
-      $panel,
+      $panel: $xeFilterPanel,
       $table: $xeTable
     });
+    const tableProps = $xeTable;
+    const vSize = $xeFilterPanel.computeSize;
     const filterOpts = $xeTable.computeFilterOpts;
     const {
       destroyOnClose
     } = filterOpts;
     return h('div', {
+      ref: 'refElem',
       class: ['vxe-table--filter-wrapper', 'filter--prevent-default', compConf && compConf.className ? compConf.className : '', getClass(filterClassName, params), {
-        'is--animat': $xeTable.animat,
+        [`size--${vSize}`]: vSize,
+        'is--animat': tableProps.animat,
         'is--multiple': multiple,
         'is--active': visible
       }],
       style: filterStore.style
-    }, filterStore.visible && (destroyOnClose ? visible : true) && column ? this.renderOptions(h, filterRender, compConf).concat(this.renderFooter(h)) : []);
+    }, filterStore.visible && (destroyOnClose ? visible : true) && column ? renderOptions($xeFilterPanel, h, filterRender, compConf).concat(renderFooter($xeFilterPanel, h)) : []);
   },
   methods: {
-    renderOptions(h, filterRender, compConf) {
-      const $panel = this;
-      const $xeTable = this.$parent;
-      const tableInternalData = $xeTable;
-      const {
-        filterStore
-      } = this;
-      const {
-        column,
-        multiple,
-        maxHeight
-      } = filterStore;
-      const slots = column ? column.slots : null;
-      const filterSlot = slots ? slots.filter : null;
-      const params = Object.assign({}, tableInternalData._currFilterParams, {
-        $panel,
-        $table: $xeTable
-      });
-      const rtFilter = compConf ? compConf.renderTableFilter || compConf.renderFilter : null;
-      if (filterSlot) {
-        return [h('div', {
-          class: 'vxe-table--filter-template',
-          style: maxHeight ? {
-            maxHeight: `${maxHeight}px`
-          } : {}
-        }, $xeTable.callSlot(filterSlot, params, h))];
-      } else if (rtFilter) {
-        return [h('div', {
-          class: 'vxe-table--filter-template',
-          style: maxHeight ? {
-            maxHeight: `${maxHeight}px`
-          } : {}
-        }, getSlotVNs(rtFilter.call($xeTable, h, filterRender, params)))];
-      }
-      const isAllChecked = multiple ? filterStore.isAllSelected : !filterStore.options.some(item => item._checked);
-      const isAllIndeterminate = multiple && filterStore.isIndeterminate;
-      return [h('ul', {
-        class: 'vxe-table--filter-header'
-      }, [h('li', {
-        class: ['vxe-table--filter-option', {
-          'is--checked': isAllChecked,
-          'is--indeterminate': isAllIndeterminate
-        }],
-        attrs: {
-          title: filter_panel_getI18n(multiple ? 'vxe.table.allTitle' : 'vxe.table.allFilter')
-        },
-        on: {
-          click: evnt => {
-            this.changeAllOption(evnt, !filterStore.isAllSelected);
-          }
-        }
-      }, (multiple ? [h('span', {
-        class: ['vxe-checkbox--icon', isAllIndeterminate ? filter_panel_getIcon().TABLE_CHECKBOX_INDETERMINATE : isAllChecked ? filter_panel_getIcon().TABLE_CHECKBOX_CHECKED : filter_panel_getIcon().TABLE_CHECKBOX_UNCHECKED]
-      })] : []).concat([h('span', {
-        class: 'vxe-checkbox--label'
-      }, filter_panel_getI18n('vxe.table.allFilter'))]))]), h('ul', {
-        class: 'vxe-table--filter-body',
-        style: maxHeight ? {
-          maxHeight: `${maxHeight}px`
-        } : {}
-      }, filterStore.options.map(item => {
-        const isChecked = item._checked;
-        const isIndeterminate = false;
-        return h('li', {
-          class: ['vxe-table--filter-option', {
-            'is--checked': isChecked
-          }],
-          attrs: {
-            title: item.label
-          },
-          on: {
-            click: evnt => {
-              this.changeOption(evnt, !item._checked, item);
-            }
-          }
-        }, (multiple ? [h('span', {
-          class: ['vxe-checkbox--icon', isIndeterminate ? filter_panel_getIcon().TABLE_CHECKBOX_INDETERMINATE : isChecked ? filter_panel_getIcon().TABLE_CHECKBOX_CHECKED : filter_panel_getIcon().TABLE_CHECKBOX_UNCHECKED]
-        })] : []).concat([h('span', {
-          class: 'vxe-checkbox--label'
-        }, formatText(item.label, 1))]));
-      }))];
-    },
-    renderFooter(h) {
-      const $xeTable = this.$parent;
-      const {
-        hasCheckOption,
-        filterStore
-      } = this;
-      const {
-        column,
-        multiple
-      } = filterStore;
-      const filterOpts = $xeTable.computeFilterOpts;
-      const filterRender = column.filterRender;
-      const compConf = isEnableConf(filterRender) ? panel_renderer.get(filterRender.name) : null;
-      const isDisabled = !hasCheckOption && !filterStore.isAllSelected && !filterStore.isIndeterminate;
-      return multiple && (compConf ? !(compConf.showTableFilterFooter === false || compConf.showFilterFooter === false || compConf.isFooter === false) : true) ? [h('div', {
-        class: 'vxe-table--filter-footer'
-      }, [h('button', {
-        class: {
-          'is--disabled': isDisabled
-        },
-        attrs: {
-          disabled: isDisabled
-        },
-        on: {
-          click: this.confirmFilter
-        }
-      }, filterOpts.confirmButtonText || filter_panel_getI18n('vxe.table.confirmFilter')), h('button', {
-        on: {
-          click: this.resetFilter
-        }
-      }, filterOpts.resetButtonText || filter_panel_getI18n('vxe.table.resetFilter'))])] : [];
-    },
     // 全部筛选事件
     filterCheckAllEvent(evnt, value) {
       const filterStore = this.filterStore;
@@ -19725,12 +19791,12 @@ const {
 const {
   getI18n: import_panel_getI18n,
   getIcon: import_panel_getIcon,
-  globalMixins,
+  globalMixins: import_panel_globalMixins,
   renderEmptyElement: import_panel_renderEmptyElement
 } = core_.VxeUI;
 /* harmony default export */ var import_panel = ({
   name: 'VxeTableImportPanel',
-  mixins: [globalMixins.sizeMixin],
+  mixins: [import_panel_globalMixins.sizeMixin],
   props: {
     defaultOptions: Object,
     storeData: Object
@@ -20668,6 +20734,16 @@ const {
           filterStore.visible = false;
         } else {
           const el = $xeTable.$refs.refElem;
+          const {
+            scrollTop,
+            scrollLeft,
+            visibleHeight,
+            visibleWidth
+          } = getDomNode();
+          const filterOpts = $xeTable.computeFilterOpts;
+          const {
+            transfer
+          } = filterOpts;
           const tableRect = el.getBoundingClientRect();
           const btnElem = evnt.currentTarget;
           const {
@@ -20715,23 +20791,37 @@ const {
               return;
             }
             const btnRect = btnElem.getBoundingClientRect();
-            const filterWidth = filterWrapperElem.offsetWidth;
             const filterHeadElem = filterWrapperElem.querySelector('.vxe-table--filter-header');
             const filterFootElem = filterWrapperElem.querySelector('.vxe-table--filter-footer');
+            const filterWidth = filterWrapperElem.offsetWidth;
             const centerWidth = filterWidth / 2;
-            let left = btnRect.left - tableRect.left - centerWidth;
-            const top = btnRect.top - tableRect.top + btnElem.clientHeight;
-            // 判断面板不能大于表格高度
-            const maxHeight = Math.max(40, el.clientHeight - top - (filterHeadElem ? filterHeadElem.clientHeight : 0) - (filterFootElem ? filterFootElem.clientHeight : 0) - 14);
-            if (left < 1) {
-              left = 1;
-            } else if (left > el.clientWidth - filterWidth - 1) {
-              left = el.clientWidth - filterWidth - 1;
+            let left = 0;
+            let top = 0;
+            let maxHeight = 0;
+            if (transfer) {
+              left = btnRect.left - centerWidth + scrollLeft;
+              top = btnRect.top + btnElem.clientHeight + scrollTop;
+              maxHeight = Math.min(Math.max(tableRect.height, Math.floor(visibleHeight / 2)), Math.max(80, visibleHeight - top - (filterHeadElem ? filterHeadElem.clientHeight : 0) - (filterFootElem ? filterFootElem.clientHeight : 0) - 28));
+              if (left < 16) {
+                left = 16;
+              } else if (left > visibleWidth - filterWidth - 16) {
+                left = visibleWidth - filterWidth - 16;
+              }
+            } else {
+              left = btnRect.left - tableRect.left - centerWidth;
+              top = btnRect.top - tableRect.top + btnElem.clientHeight;
+              maxHeight = Math.max(40, el.clientHeight - top - (filterHeadElem ? filterHeadElem.clientHeight : 0) - (filterFootElem ? filterFootElem.clientHeight : 0) - 14);
+              if (left < 1) {
+                left = 1;
+              } else if (left > el.clientWidth - filterWidth - 1) {
+                left = el.clientWidth - filterWidth - 1;
+              }
             }
             filterStore.style = {
               top: toCssUnit(top),
               left: toCssUnit(left)
             };
+            // 判断面板不能大于表格高度
             filterStore.maxHeight = maxHeight;
           });
         }
@@ -27510,6 +27600,9 @@ function renderBody(h, $xeTable) {
     if (this.highlightHoverColumn) {
       warnLog('vxe.error.delProp', ['highlight-hover-column', 'column-config.isHover']);
     }
+    if (props.resizable) {
+      warnLog('vxe.error.delProp', ['resizable', 'column-config.resizable']);
+    }
     // if (props.scrollY) {
     //   warnLog('vxe.error.delProp', ['scroll-y', 'virtual-y-config'])
     // }