vxe-table 4.23.0-beta.3 → 4.23.0-beta.4

package/lib/table/module/filter/hook.js

@@ -34,7 +34,8 @@ hooks.add('tableFilterModule', {
     } = $xeTable.getComputeMaps();
     const updatePopupStyle = () => {
       const {
-        filterStore
+        filterStore,
+        scrollbarHeight
       } = reactData;
       const {
         elemStore
@@ -65,8 +66,6 @@ hooks.add('tableFilterModule', {
       if (!filterWrapperElem) {
         return (0, _vue.nextTick)();
       }
-      const filterHeadElem = filterWrapperElem.querySelector('.vxe-table--filter-header');
-      const filterFootElem = filterWrapperElem.querySelector('.vxe-table--filter-footer');
       /**
        * 是否显示筛选按钮图标
        * 如果不存在图标，则相对单元格居中显示
@@ -102,7 +101,7 @@ hooks.add('tableFilterModule', {
           const centerWidth = targetEl ? filterWidth / 2 : (filterWidth - column.renderWidth) / 2;
           left = btnRect.left - tableRect.left - centerWidth;
           top = btnRect.top - tableRect.top + currEl.clientHeight;
-          maxHeight = Math.max(40, tableEl.clientHeight - top - (filterHeadElem ? filterHeadElem.clientHeight : 0) - (filterFootElem ? filterFootElem.clientHeight : 0) - 14);
+          maxHeight = Math.max(40, tableEl.clientHeight - top - scrollbarHeight);
           if (left < 1) {
             left = 1;
           } else if (left > tableEl.clientWidth - filterWidth - 1) {
@@ -123,7 +122,6 @@ hooks.add('tableFilterModule', {
         if (zIndex) {
           panelStyle.zIndex = zIndex;
         }
-        filterStore.style = panelStyle;
         // 筛选面板是自适应表格高度
         if (compConf ? !compConf.tableFilterAutoHeight : false) {
           maxHeight = 0;
@@ -132,8 +130,8 @@ hooks.add('tableFilterModule', {
             maxHeight = customMaxHeight > maxHeight ? maxHeight : customMaxHeight;
           }
         }
-        // 判断面板不能大于表格高度
-        filterStore.maxHeight = maxHeight;
+        panelStyle['--vxe-ui-vxe-table-filter-default-max-height'] = maxHeight ? (0, _dom.toCssUnit)(maxHeight) : 'none';
+        filterStore.style = panelStyle;
       };
       handleStyle();
       return (0, _vue.nextTick)().then(() => {

package/lib/table/module/filter/hook.min.js

@@ -1 +1 @@
-var _vue=require("vue"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../../ui"),_util=require("../../src/util"),_dom=require("../../../ui/src/dom"),_utils=require("../../../ui/src/utils");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}let{renderer,hooks}=_ui.VxeUI,tableFilterMethodKeys=["openFilter","setFilter","clearFilter","saveFilter","saveFilterByEvent","saveFilterPanel","saveFilterPanelByEvent","resetFilter","resetFilterByEvent","resetFilterPanel","resetFilterPanelByEvent","getCheckedFilters","updateFilterOptionStatus"],sourceType="table";hooks.add("tableFilterModule",{setupTable(s){let a=s.xeGrid,u=s.xeGantt,x=a||u,{props:h,reactData:k,internalData:o}=s,{refElem:r,refTableFilter:i}=s.getRefMaps(),{computeFilterOpts:E,computeMouseOpts:f,computeRendererOpts:n}=s.getComputeMaps(),d=()=>{let d=k.filterStore,c=o.elemStore,{column:s,targetEl:h}=d;if(!s)return(0,_vue.nextTick)();let f=r.value;var e=E.value,t=n.value;let{maxHeight:m,transfer:v,zIndex:F}=e;e=s?s.filterRender:null;let p=e&&(0,_utils.isEnableConf)(e)&&e.name?t[e.name]||renderer.get(e.name):null;if(!(0,_util.getRefElem)(c["main-header-scroll"]))return(0,_vue.nextTick)();t=i.value;let _=t?t.getRefMaps().refElem.value:null;if(!_)return(0,_vue.nextTick)();let C=_.querySelector(".vxe-table--filter-header"),g=_.querySelector(".vxe-table--filter-footer"),l=()=>{let e=h;if(h||(r=(r=(0,_util.getRefElem)(c[`${s.fixed||"main"}-header-wrapper`]||c["main-header-wrapper"]))?r.querySelector(".vxe-header--column."+s.id):null)&&(e=r),!e)return(0,_vue.nextTick)();var t,l,r=e.getBoundingClientRect(),i=f.getBoundingClientRect();let n=0,a=0,u=0,o={};o=v?(0,_dom.updatePanelPlacement)(e,_,{defaultPlacement:"bottom",appendTo:"",isMinWidth:!1,teleportTo:v}).style:(t=_.offsetWidth,l=h?t/2:(t-s.renderWidth)/2,n=r.left-i.left-l,a=r.top-i.top+e.clientHeight,u=Math.max(40,f.clientHeight-a-(C?C.clientHeight:0)-(g?g.clientHeight:0)-14),n<1?n=1:n>f.clientWidth-t-1&&(n=f.clientWidth-t-1),x&&(l=x.getRefMaps().refElem.value)&&(r=l.getBoundingClientRect(),a+=i.top-r.top),{top:(0,_dom.toCssUnit)(a),left:(0,_dom.toCssUnit)(n)}),F&&(o.zIndex=F),d.style=o,p&&!p.tableFilterAutoHeight?u=0:m&&(u=m>u?u:m),d.maxHeight=u};return l(),(0,_vue.nextTick)().then(()=>{l()})};var e={checkFilterOptions(){var e=k.filterStore,t=e.column;t&&(t=t.filters||[],e.isAllSelected=t.every(e=>e._checked),e.isIndeterminate=!e.isAllSelected&&t.some(e=>e._checked))},handleOpenFilterColumn(e,t,l,r,i){var{initStore:n,filterStore:a}=k;a.column===r&&a.visible?a.visible=!1:(s.handleFilterOptions(r),o._currFilterParams=i,a.targetEl=t,a.style=null,a.visible=!0,n.filter=!0),(0,_vue.nextTick)().then(()=>{d()}),s.dispatchEvent("filter-visible",{column:r,field:r.field,property:r.field,filterList:s.getCheckedFilters(),visible:a.visible},e)},triggerFilterEvent(e,t,l){var r=o.elemStore,i=t.fixed,i=(0,_util.getRefElem)(r[`${i||"main"}-header-wrapper`]||r["main-header-wrapper"]),r=e.currentTarget,i=i?i.querySelector(".vxe-header--column."+t.id):null;s.handleOpenFilterColumn(e,r,i||r,t,l)},handleClearFilter(e){if(e){var{filters:l,filterRender:r}=e;if(l){var i=n.value,i=(0,_utils.isEnableConf)(r)&&r.name?i[r.name]||renderer.get(r.name):null;let t=e.filterResetMethod||(i?i.tableFilterResetMethod||i.filterResetMethod:null);l.forEach(e=>{e._checked=!1,e.checked=!1,t||(e.data=_xeUtils.default.clone(e.resetValue,!0))}),t&&t({options:l,column:e,$table:s})}}},handleColumnConfirmFilter(e,t){var l=h.mouseConfig;let{scrollXLoad:r,scrollYLoad:i}=k;var n=E.value,a=f.value,{field:u,filters:o}=e;let d=[],c=[];(o||[]).forEach(e=>{e.checked&&(d.push(e.value),c.push(e.data))});o=s.getCheckedFilters(),e={$table:s,$event:t,column:e,field:u,property:u,values:d,datas:c,filters:o,filterList:o};return n.remote||(s.handleTableData(!0),s.checkSelectionStatus()),(0,_utils.hasEnableConf)(l,a)&&a.area&&s.handleFilterEvent&&s.handleFilterEvent(t,e),t&&s.dispatchEvent("filter-change",e,t),s.closeFilter(),s.updateFooter().then(()=>{var{scrollXLoad:e,scrollYLoad:t}=k;if(r||e||i||t)return(r||e)&&s.updateScrollXSpace(),(i||t)&&s.updateScrollYSpace(),s.refreshScroll()}).then(()=>(s.updateCellAreas(),s.recalculate(!0))).then(()=>{setTimeout(()=>s.recalculate(),50)})},confirmFilterEvent(e,t){t&&s.handleColumnConfirmFilter(t,e)},handleFilterChangeRadioOption(e,t,l){var r=k.filterStore,r=r.column;r&&((r.filters||[]).forEach(e=>{e._checked=!1}),l._checked=t,s.checkFilterOptions(),s.handleFilterConfirmFilter(e,r))},handleFilterChangeMultipleOption(e,t,l){l._checked=t,s.checkFilterOptions()},handleFilterChangeOption(e,t,l){var r=k.filterStore,i=o.fullColumnIdData;let n=r.column;n||(i=i[l._colId])&&(n=i.column,r.column=n),n&&(n.filterMultiple?s.handleFilterChangeMultipleOption(e,t,l):s.handleFilterChangeRadioOption(e,t,l))},handleFilterConfirmFilter(e,t){t&&((t.filters||[]).forEach(e=>{e.checked=e._checked}),s.confirmFilterEvent(e,t))},handleFilterResetFilter(e,t){t&&(s.handleClearFilter(t),s.confirmFilterEvent(e,t),e)&&s.dispatchEvent("clear-filter",{filterList:[]},e)},handleFilterStyle(){var e=k.filterStore;return(e.visible?d:(0,_vue.nextTick))()}};return Object.assign(Object.assign({},{openFilter(e){let n=(0,_util.handleFieldOrColumn)(s,e);if(n&&n.filters){let e=o.elemStore,{fixed:r,filters:i}=n;return s.scrollToColumn(n).then(()=>{var t=(0,_util.getRefElem)(e[`${r||"main"}-header-wrapper`]||e["main-header-wrapper"]);if(t){var l=t.querySelector(`.vxe-header--column.${n.id} .vxe-cell--filter`);if(l)(0,_dom.triggerEvent)(l,"click");else{l=t.querySelector(".vxe-header--column."+n.id);if(l){let e=null;i&&(e=i[0]);t={$table:s,$grid:a,$gantt:u,$rowIndex:-1,column:n,columnIndex:s.getColumnIndex(n),$columnIndex:s.getVMColumnIndex(n),_columnIndex:s.getVTColumnIndex(n),firstFilterOption:e,fixed:r,source:sourceType,type:"header"};s.handleOpenFilterColumn(new Event("click"),null,l,n,t)}}}})}return(0,_vue.nextTick)()},setFilter(e,t,l){var r=k.filterStore,e=(0,_util.handleFieldOrColumn)(s,e);if(e&&e.filters){if(e.filters=(0,_util.toFilters)(t||[],e.id),l)return s.handleColumnConfirmFilter(e,null);r.visible&&s.handleFilterOptions(e)}return(0,_vue.nextTick)()},clearFilter(e){var t=k.filterStore,l=o.tableFullColumn,r=E.value;let i;return e?(i=(0,_util.handleFieldOrColumn)(s,e))&&s.handleClearFilter(i):l.forEach(s.handleClearFilter),e&&i===t.column||Object.assign(t,{isAllSelected:!1,isIndeterminate:!1,style:null,options:[],column:null,multiple:!1,visible:!1}),r.remote?(0,_vue.nextTick)():s.updateData()},saveFilter(e){return e&&(e=(0,_util.handleFieldOrColumn)(s,e),s.handleFilterConfirmFilter(null,e)),(0,_vue.nextTick)()},saveFilterByEvent(e,t){return t&&(t=(0,_util.handleFieldOrColumn)(s,t),s.handleFilterConfirmFilter(e,t)),(0,_vue.nextTick)()},resetFilter(e){return e&&(e=(0,_util.handleFieldOrColumn)(s,e),s.handleFilterResetFilter(null,e)),(0,_vue.nextTick)()},resetFilterByEvent(e,t){return t&&(t=(0,_util.handleFieldOrColumn)(s,t),s.handleFilterResetFilter(e,t)),(0,_vue.nextTick)()},saveFilterPanel(){var e=k.filterStore;return s.handleFilterConfirmFilter(null,e.column||null),(0,_vue.nextTick)()},saveFilterPanelByEvent(e){var t=k.filterStore;return s.handleFilterConfirmFilter(e,t.column||null),(0,_vue.nextTick)()},resetFilterPanel(){var e=k.filterStore;return s.handleFilterResetFilter(null,e.column||null),(0,_vue.nextTick)()},resetFilterPanelByEvent(e){var t=k.filterStore;return s.handleFilterResetFilter(e,t.column||null),(0,_vue.nextTick)()},getCheckedFilters(){var e=o.tableFullColumn;let n=[];return e.forEach(e=>{var{field:t,filters:l}=e,l=l||[];let r=[],i=[];l&&(l.forEach(e=>{e.checked&&(r.push(e.value),i.push(e.data))}),r.length)&&n.push({column:e,field:t,property:t,values:r,datas:i})}),n},updateFilterOptionStatus(e,t){return e._checked=t,e.checked=t,(0,_vue.nextTick)()}}),e)},setupGrid(e){return e.extendTableMethods(tableFilterMethodKeys)},setupGantt(e){return e.extendTableMethods(tableFilterMethodKeys)}});
+var _vue=require("vue"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../../ui"),_util=require("../../src/util"),_dom=require("../../../ui/src/dom"),_utils=require("../../../ui/src/utils");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}let{renderer,hooks}=_ui.VxeUI,tableFilterMethodKeys=["openFilter","setFilter","clearFilter","saveFilter","saveFilterByEvent","saveFilterPanel","saveFilterPanelByEvent","resetFilter","resetFilterByEvent","resetFilterPanel","resetFilterPanelByEvent","getCheckedFilters","updateFilterOptionStatus"],sourceType="table";hooks.add("tableFilterModule",{setupTable(s){let a=s.xeGrid,u=s.xeGantt,x=a||u,{props:h,reactData:g,internalData:o}=s,{refElem:r,refTableFilter:i}=s.getRefMaps(),{computeFilterOpts:k,computeMouseOpts:f,computeRendererOpts:n}=s.getComputeMaps(),d=()=>{let{filterStore:d,scrollbarHeight:c}=g,s=o.elemStore,{column:h,targetEl:f}=d;if(!h)return(0,_vue.nextTick)();let m=r.value;var e=k.value,t=n.value;let{maxHeight:v,transfer:F,zIndex:p}=e;e=h?h.filterRender:null;let _=e&&(0,_utils.isEnableConf)(e)&&e.name?t[e.name]||renderer.get(e.name):null;if(!(0,_util.getRefElem)(s["main-header-scroll"]))return(0,_vue.nextTick)();t=i.value;let C=t?t.getRefMaps().refElem.value:null;if(!C)return(0,_vue.nextTick)();let l=()=>{let e=f;if(f||(r=(r=(0,_util.getRefElem)(s[`${h.fixed||"main"}-header-wrapper`]||s["main-header-wrapper"]))?r.querySelector(".vxe-header--column."+h.id):null)&&(e=r),!e)return(0,_vue.nextTick)();var t,l,r=e.getBoundingClientRect(),i=m.getBoundingClientRect();let n=0,a=0,u=0,o={};o=F?(0,_dom.updatePanelPlacement)(e,C,{defaultPlacement:"bottom",appendTo:"",isMinWidth:!1,teleportTo:F}).style:(t=C.offsetWidth,l=f?t/2:(t-h.renderWidth)/2,n=r.left-i.left-l,a=r.top-i.top+e.clientHeight,u=Math.max(40,m.clientHeight-a-c),n<1?n=1:n>m.clientWidth-t-1&&(n=m.clientWidth-t-1),x&&(l=x.getRefMaps().refElem.value)&&(r=l.getBoundingClientRect(),a+=i.top-r.top),{top:(0,_dom.toCssUnit)(a),left:(0,_dom.toCssUnit)(n)}),p&&(o.zIndex=p),_&&!_.tableFilterAutoHeight?u=0:v&&(u=v>u?u:v),o["--vxe-ui-vxe-table-filter-default-max-height"]=u?(0,_dom.toCssUnit)(u):"none",d.style=o};return l(),(0,_vue.nextTick)().then(()=>{l()})};var e={checkFilterOptions(){var e=g.filterStore,t=e.column;t&&(t=t.filters||[],e.isAllSelected=t.every(e=>e._checked),e.isIndeterminate=!e.isAllSelected&&t.some(e=>e._checked))},handleOpenFilterColumn(e,t,l,r,i){var{initStore:n,filterStore:a}=g;a.column===r&&a.visible?a.visible=!1:(s.handleFilterOptions(r),o._currFilterParams=i,a.targetEl=t,a.style=null,a.visible=!0,n.filter=!0),(0,_vue.nextTick)().then(()=>{d()}),s.dispatchEvent("filter-visible",{column:r,field:r.field,property:r.field,filterList:s.getCheckedFilters(),visible:a.visible},e)},triggerFilterEvent(e,t,l){var r=o.elemStore,i=t.fixed,i=(0,_util.getRefElem)(r[`${i||"main"}-header-wrapper`]||r["main-header-wrapper"]),r=e.currentTarget,i=i?i.querySelector(".vxe-header--column."+t.id):null;s.handleOpenFilterColumn(e,r,i||r,t,l)},handleClearFilter(e){if(e){var{filters:l,filterRender:r}=e;if(l){var i=n.value,i=(0,_utils.isEnableConf)(r)&&r.name?i[r.name]||renderer.get(r.name):null;let t=e.filterResetMethod||(i?i.tableFilterResetMethod||i.filterResetMethod:null);l.forEach(e=>{e._checked=!1,e.checked=!1,t||(e.data=_xeUtils.default.clone(e.resetValue,!0))}),t&&t({options:l,column:e,$table:s})}}},handleColumnConfirmFilter(e,t){var l=h.mouseConfig;let{scrollXLoad:r,scrollYLoad:i}=g;var n=k.value,a=f.value,{field:u,filters:o}=e;let d=[],c=[];(o||[]).forEach(e=>{e.checked&&(d.push(e.value),c.push(e.data))});o=s.getCheckedFilters(),e={$table:s,$event:t,column:e,field:u,property:u,values:d,datas:c,filters:o,filterList:o};return n.remote||(s.handleTableData(!0),s.checkSelectionStatus()),(0,_utils.hasEnableConf)(l,a)&&a.area&&s.handleFilterEvent&&s.handleFilterEvent(t,e),t&&s.dispatchEvent("filter-change",e,t),s.closeFilter(),s.updateFooter().then(()=>{var{scrollXLoad:e,scrollYLoad:t}=g;if(r||e||i||t)return(r||e)&&s.updateScrollXSpace(),(i||t)&&s.updateScrollYSpace(),s.refreshScroll()}).then(()=>(s.updateCellAreas(),s.recalculate(!0))).then(()=>{setTimeout(()=>s.recalculate(),50)})},confirmFilterEvent(e,t){t&&s.handleColumnConfirmFilter(t,e)},handleFilterChangeRadioOption(e,t,l){var r=g.filterStore,r=r.column;r&&((r.filters||[]).forEach(e=>{e._checked=!1}),l._checked=t,s.checkFilterOptions(),s.handleFilterConfirmFilter(e,r))},handleFilterChangeMultipleOption(e,t,l){l._checked=t,s.checkFilterOptions()},handleFilterChangeOption(e,t,l){var r=g.filterStore,i=o.fullColumnIdData;let n=r.column;n||(i=i[l._colId])&&(n=i.column,r.column=n),n&&(n.filterMultiple?s.handleFilterChangeMultipleOption(e,t,l):s.handleFilterChangeRadioOption(e,t,l))},handleFilterConfirmFilter(e,t){t&&((t.filters||[]).forEach(e=>{e.checked=e._checked}),s.confirmFilterEvent(e,t))},handleFilterResetFilter(e,t){t&&(s.handleClearFilter(t),s.confirmFilterEvent(e,t),e)&&s.dispatchEvent("clear-filter",{filterList:[]},e)},handleFilterStyle(){var e=g.filterStore;return(e.visible?d:(0,_vue.nextTick))()}};return Object.assign(Object.assign({},{openFilter(e){let n=(0,_util.handleFieldOrColumn)(s,e);if(n&&n.filters){let e=o.elemStore,{fixed:r,filters:i}=n;return s.scrollToColumn(n).then(()=>{var t=(0,_util.getRefElem)(e[`${r||"main"}-header-wrapper`]||e["main-header-wrapper"]);if(t){var l=t.querySelector(`.vxe-header--column.${n.id} .vxe-cell--filter`);if(l)(0,_dom.triggerEvent)(l,"click");else{l=t.querySelector(".vxe-header--column."+n.id);if(l){let e=null;i&&(e=i[0]);t={$table:s,$grid:a,$gantt:u,$rowIndex:-1,column:n,columnIndex:s.getColumnIndex(n),$columnIndex:s.getVMColumnIndex(n),_columnIndex:s.getVTColumnIndex(n),firstFilterOption:e,fixed:r,source:sourceType,type:"header"};s.handleOpenFilterColumn(new Event("click"),null,l,n,t)}}}})}return(0,_vue.nextTick)()},setFilter(e,t,l){var r=g.filterStore,e=(0,_util.handleFieldOrColumn)(s,e);if(e&&e.filters){if(e.filters=(0,_util.toFilters)(t||[],e.id),l)return s.handleColumnConfirmFilter(e,null);r.visible&&s.handleFilterOptions(e)}return(0,_vue.nextTick)()},clearFilter(e){var t=g.filterStore,l=o.tableFullColumn,r=k.value;let i;return e?(i=(0,_util.handleFieldOrColumn)(s,e))&&s.handleClearFilter(i):l.forEach(s.handleClearFilter),e&&i===t.column||Object.assign(t,{isAllSelected:!1,isIndeterminate:!1,style:null,options:[],column:null,multiple:!1,visible:!1}),r.remote?(0,_vue.nextTick)():s.updateData()},saveFilter(e){return e&&(e=(0,_util.handleFieldOrColumn)(s,e),s.handleFilterConfirmFilter(null,e)),(0,_vue.nextTick)()},saveFilterByEvent(e,t){return t&&(t=(0,_util.handleFieldOrColumn)(s,t),s.handleFilterConfirmFilter(e,t)),(0,_vue.nextTick)()},resetFilter(e){return e&&(e=(0,_util.handleFieldOrColumn)(s,e),s.handleFilterResetFilter(null,e)),(0,_vue.nextTick)()},resetFilterByEvent(e,t){return t&&(t=(0,_util.handleFieldOrColumn)(s,t),s.handleFilterResetFilter(e,t)),(0,_vue.nextTick)()},saveFilterPanel(){var e=g.filterStore;return s.handleFilterConfirmFilter(null,e.column||null),(0,_vue.nextTick)()},saveFilterPanelByEvent(e){var t=g.filterStore;return s.handleFilterConfirmFilter(e,t.column||null),(0,_vue.nextTick)()},resetFilterPanel(){var e=g.filterStore;return s.handleFilterResetFilter(null,e.column||null),(0,_vue.nextTick)()},resetFilterPanelByEvent(e){var t=g.filterStore;return s.handleFilterResetFilter(e,t.column||null),(0,_vue.nextTick)()},getCheckedFilters(){var e=o.tableFullColumn;let n=[];return e.forEach(e=>{var{field:t,filters:l}=e,l=l||[];let r=[],i=[];l&&(l.forEach(e=>{e.checked&&(r.push(e.value),i.push(e.data))}),r.length)&&n.push({column:e,field:t,property:t,values:r,datas:i})}),n},updateFilterOptionStatus(e,t){return e._checked=t,e.checked=t,(0,_vue.nextTick)()}}),e)},setupGrid(e){return e.extendTableMethods(tableFilterMethodKeys)},setupGantt(e){return e.extendTableMethods(tableFilterMethodKeys)}});

package/lib/table/module/filter/panel.js

@@ -32,6 +32,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
   },
   setup(props, context) {
     const xID = _xeUtils.default.uniqueId();
+    const VxeUIScrollbarComponent = _ui.VxeUI.getComponent('VxeScrollbar');
     const $xeTable = (0, _vue.inject)('$xeTable', {});
     const {
       reactData: tableReactData,
@@ -144,12 +145,15 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         filterStore
       } = props;
       const {
-        column,
-        maxHeight
+        column
       } = filterStore;
       if (!column) {
         return [];
       }
+      const filterOpts = computeFilterOpts.value;
+      const {
+        useScrollbar
+      } = filterOpts;
       const {
         filterMultiple,
         filters,
@@ -165,45 +169,19 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const rtFilter = compConf ? compConf.renderTableFilter || compConf.renderFilter : null;
       if (filterSlot) {
         return [(0, _vue.h)('div', {
-          class: 'vxe-table--filter-template',
-          style: maxHeight ? {
-            maxHeight: (0, _dom.toCssUnit)(maxHeight)
-          } : {}
+          class: 'vxe-table--filter-template'
         }, $xeTable.callSlot(filterSlot, params))];
       } else if (filterRender && rtFilter) {
         return [(0, _vue.h)('div', {
-          class: 'vxe-table--filter-template',
-          style: maxHeight ? {
-            maxHeight: (0, _dom.toCssUnit)(maxHeight)
-          } : {}
+          class: 'vxe-table--filter-template'
         }, (0, _vn.getSlotVNs)(rtFilter(filterRender, params)))];
       }
       const isAllChecked = filterMultiple ? filterStore.isAllSelected : !filterOptions.some(item => item._checked);
       const isAllIndeterminate = filterMultiple && filterStore.isIndeterminate;
-      return [(0, _vue.h)('ul', {
-        class: 'vxe-table--filter-header'
-      }, [(0, _vue.h)('li', {
-        class: ['vxe-table--filter-option', {
-          'is--checked': isAllChecked,
-          'is--indeterminate': isAllIndeterminate
-        }],
-        title: getI18n(filterMultiple ? 'vxe.table.allTitle' : 'vxe.table.allFilter'),
-        onClick: evnt => {
-          changeAllOption(evnt, !filterStore.isAllSelected);
-        }
-      }, (filterMultiple ? [(0, _vue.h)('span', {
-        class: ['vxe-checkbox--icon', isAllIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : isAllChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED]
-      })] : []).concat([(0, _vue.h)('span', {
-        class: 'vxe-checkbox--label'
-      }, getI18n('vxe.table.allFilter'))]))]), (0, _vue.h)('ul', {
-        class: 'vxe-table--filter-body',
-        style: maxHeight ? {
-          maxHeight: (0, _dom.toCssUnit)(maxHeight)
-        } : {}
-      }, filterOptions.map(item => {
+      const optVNs = filterOptions.map(item => {
         const isChecked = item._checked;
         const isIndeterminate = false;
-        return (0, _vue.h)('li', {
+        return (0, _vue.h)('div', {
           class: ['vxe-table--filter-option', {
             'is--checked': item._checked
           }],
@@ -216,7 +194,30 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         })] : []).concat([(0, _vue.h)('span', {
           class: 'vxe-checkbox--label'
         }, (0, _utils.formatText)(item.label, 1))]));
-      }))];
+      });
+      return [(0, _vue.h)('div', {
+        class: 'vxe-table--filter-header'
+      }, [(0, _vue.h)('div', {
+        class: ['vxe-table--filter-option', {
+          'is--checked': isAllChecked,
+          'is--indeterminate': isAllIndeterminate
+        }],
+        title: getI18n(filterMultiple ? 'vxe.table.allTitle' : 'vxe.table.allFilter'),
+        onClick: evnt => {
+          changeAllOption(evnt, !filterStore.isAllSelected);
+        }
+      }, (filterMultiple ? [(0, _vue.h)('span', {
+        class: ['vxe-checkbox--icon', isAllIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : isAllChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED]
+      })] : []).concat([(0, _vue.h)('span', {
+        class: 'vxe-checkbox--label'
+      }, getI18n('vxe.table.allFilter'))]))]), useScrollbar ? (0, _vue.h)(VxeUIScrollbarComponent, {
+        class: 'vxe-table--scrollbar-filter-body',
+        viewClassName: 'vxe-table--scrollbar-filter-body-view'
+      }, {
+        default: () => optVNs
+      }) : (0, _vue.h)('div', {
+        class: 'vxe-table--filter-body'
+      }, optVNs)];
     };
     const renderFooters = () => {
       const {

package/lib/table/module/filter/panel.min.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../../ui/src/comp"),_ui=require("../../../ui"),_utils=require("../../../ui/src/utils"),_dom=require("../../../ui/src/dom"),_vn=require("../../../ui/src/vn"),_log=require("../../../ui/src/log"),_xeUtils=_interopRequireDefault(require("xe-utils"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}let warnLog=(0,_log.createComponentLog)("table").warnLog,{getI18n,getIcon,renderer,renderEmptyElement}=_ui.VxeUI;var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeTableFilterPanel",props:{filterStore:{type:Object,default:()=>({})}},setup(m,e){var t=_xeUtils.default.uniqueId();let _=(0,_vue.inject)("$xeTable",{}),{reactData:p,internalData:f,getComputeMaps:l}=_,{computeFilterOpts:h,computeRendererOpts:b}=l(),x=(0,_vue.ref)(),r={refElem:x},g={xID:t,props:m,context:e,getRefMaps:()=>r},C=(0,_vue.computed)(()=>{var e=m.filterStore,e=e.column;return e&&e.filters&&e.filters.some(e=>e.checked)}),i=(e,t)=>{var l=m.filterStore,r=l.column;r&&r.filters&&r.filters.forEach(e=>{e._checked=t,e.checked=t}),l.isAllSelected=t,l.isIndeterminate=!1},E=e=>{var t=m.filterStore;e||warnLog("vxe.error.delFunc",["confirmFilter","saveFilterPanelByEvent"]),_.handleFilterConfirmFilter(e||new Event("click"),t.column||null)};let F=e=>{var t=m.filterStore;_.handleFilterResetFilter(e,t.column||null)};let O=(e,t,l)=>{_.handleFilterChangeOption(e,t,l)},I=(e,t)=>{var l=m.filterStore,l=l.column;l&&l.filterMultiple?i(0,t):F(e)};t={changeRadioOption:(e,t,l)=>{_.handleFilterChangeRadioOption(e,t,l)},changeMultipleOption:(e,t,l)=>{_.handleFilterChangeMultipleOption(e,t,l)},changeAllOption:I,changeOption:O,confirmFilter:E,resetFilter:F};Object.assign(g,t);return g.renderVN=()=>{var e,t,l,r,i,a,n,o,s,u=m.filterStore,c=p.initStore,{visible:v,column:d}=u;return d?(t=b.value,l=(t=(e=d?d.filterRender:null)&&(0,_utils.isEnableConf)(e)&&e.name?t[e.name]||renderer.get(e.name):null)?t.tableFilterClassName||t.filterClassName:"",r=Object.assign({},f._currFilterParams,{$panel:g,$table:_}),i=_.props,a=_.getComputeMaps().computeSize,a=a.value,{transfer:n,destroyOnClose:o,className:s}=h.value,(0,_vue.h)(_vue.Teleport,{to:"body",disabled:!n},[(0,_vue.h)("div",{ref:x,class:["vxe-table--filter-wrapper","filter--prevent-default",s,(0,_dom.getPropClass)(l,r),{["size--"+a]:a,"is--animat":i.animat,"is--multiple":d.filterMultiple,"is--active":v}],style:u.style},c.filter&&(!o||v)&&d?((e,t)=>{let l=m.filterStore;var{column:r,maxHeight:i}=l;if(!r)return[];let{filterMultiple:a,filters:n,slots:o}=r;var r=n||[],s=o?o.filter:null,u=Object.assign({},f._currFilterParams,{option:r[0],$panel:g,$table:_}),t=t?t.renderTableFilter||t.renderFilter:null;return s?[(0,_vue.h)("div",{class:"vxe-table--filter-template",style:i?{maxHeight:(0,_dom.toCssUnit)(i)}:{}},_.callSlot(s,u))]:e&&t?[(0,_vue.h)("div",{class:"vxe-table--filter-template",style:i?{maxHeight:(0,_dom.toCssUnit)(i)}:{}},(0,_vn.getSlotVNs)(t(e,u)))]:(s=a?l.isAllSelected:!r.some(e=>e._checked),t=a&&l.isIndeterminate,[(0,_vue.h)("ul",{class:"vxe-table--filter-header"},[(0,_vue.h)("li",{class:["vxe-table--filter-option",{"is--checked":s,"is--indeterminate":t}],title:getI18n(a?"vxe.table.allTitle":"vxe.table.allFilter"),onClick:e=>{I(e,!l.isAllSelected)}},(a?[(0,_vue.h)("span",{class:["vxe-checkbox--icon",t?getIcon().TABLE_CHECKBOX_INDETERMINATE:s?getIcon().TABLE_CHECKBOX_CHECKED:getIcon().TABLE_CHECKBOX_UNCHECKED]})]:[]).concat([(0,_vue.h)("span",{class:"vxe-checkbox--label"},getI18n("vxe.table.allFilter"))]))]),(0,_vue.h)("ul",{class:"vxe-table--filter-body",style:i?{maxHeight:(0,_dom.toCssUnit)(i)}:{}},r.map(t=>{var e=t._checked;return(0,_vue.h)("li",{class:["vxe-table--filter-option",{"is--checked":t._checked}],title:t.label,onClick:e=>{O(e,!t._checked,t)}},(a?[(0,_vue.h)("span",{class:["vxe-checkbox--icon",e?getIcon().TABLE_CHECKBOX_CHECKED:getIcon().TABLE_CHECKBOX_UNCHECKED]})]:[]).concat([(0,_vue.h)("span",{class:"vxe-checkbox--label"},(0,_utils.formatText)(t.label,1))]))}))])})(e,t).concat((()=>{var e=m.filterStore,t=e.column;if(!t)return[];var l=h.value,r=b.value,i=C.value,{filterRender:t,filterMultiple:a}=t,{confirmButtonText:l,resetButtonText:n,showFooter:o}=l,r=t&&(0,_utils.isEnableConf)(t)&&t.name?r[t.name]||renderer.get(t.name):null,t=!i&&!e.isAllSelected&&!e.isIndeterminate;let s=!!a;return _xeUtils.default.isBoolean(o)?s=o:r&&(s=!(!1===r.showTableFilterFooter||!1===r.showFilterFooter||!1===r.isFooter)),s?[(0,_vue.h)("div",{class:"vxe-table--filter-footer"},[(0,_vue.h)("button",{class:{"is--disabled":t},disabled:t,onClick:E},l||getI18n("vxe.table.confirmFilter")),(0,_vue.h)("button",{onClick:F},n||getI18n("vxe.table.resetFilter"))])]:[]})()):[])])):renderEmptyElement(g)},g},render(){return this.renderVN()}});
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../../ui/src/comp"),_ui=require("../../../ui"),_utils=require("../../../ui/src/utils"),_dom=require("../../../ui/src/dom"),_vn=require("../../../ui/src/vn"),_log=require("../../../ui/src/log"),_xeUtils=_interopRequireDefault(require("xe-utils"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}let warnLog=(0,_log.createComponentLog)("table").warnLog,{getI18n,getIcon,renderer,renderEmptyElement}=_ui.VxeUI;var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeTableFilterPanel",props:{filterStore:{type:Object,default:()=>({})}},setup(f,e){var t=_xeUtils.default.uniqueId();let p=_ui.VxeUI.getComponent("VxeScrollbar"),_=(0,_vue.inject)("$xeTable",{}),{reactData:m,internalData:b,getComputeMaps:l}=_,{computeFilterOpts:h,computeRendererOpts:x}=l(),C=(0,_vue.ref)(),r={refElem:C},g={xID:t,props:f,context:e,getRefMaps:()=>r},E=(0,_vue.computed)(()=>{var e=f.filterStore,e=e.column;return e&&e.filters&&e.filters.some(e=>e.checked)}),i=(e,t)=>{var l=f.filterStore,r=l.column;r&&r.filters&&r.filters.forEach(e=>{e._checked=t,e.checked=t}),l.isAllSelected=t,l.isIndeterminate=!1},F=e=>{var t=f.filterStore;e||warnLog("vxe.error.delFunc",["confirmFilter","saveFilterPanelByEvent"]),_.handleFilterConfirmFilter(e||new Event("click"),t.column||null)};let I=e=>{var t=f.filterStore;_.handleFilterResetFilter(e,t.column||null)};let O=(e,t,l)=>{_.handleFilterChangeOption(e,t,l)},S=(e,t)=>{var l=f.filterStore,l=l.column;l&&l.filterMultiple?i(0,t):I(e)};t={changeRadioOption:(e,t,l)=>{_.handleFilterChangeRadioOption(e,t,l)},changeMultipleOption:(e,t,l)=>{_.handleFilterChangeMultipleOption(e,t,l)},changeAllOption:S,changeOption:O,confirmFilter:F,resetFilter:I};Object.assign(g,t);return g.renderVN=()=>{var e,t,l,r,i,a,n,o,s,u=f.filterStore,c=m.initStore,{visible:v,column:d}=u;return d?(t=x.value,l=(t=(e=d?d.filterRender:null)&&(0,_utils.isEnableConf)(e)&&e.name?t[e.name]||renderer.get(e.name):null)?t.tableFilterClassName||t.filterClassName:"",r=Object.assign({},b._currFilterParams,{$panel:g,$table:_}),i=_.props,a=_.getComputeMaps().computeSize,a=a.value,{transfer:n,destroyOnClose:o,className:s}=h.value,(0,_vue.h)(_vue.Teleport,{to:"body",disabled:!n},[(0,_vue.h)("div",{ref:C,class:["vxe-table--filter-wrapper","filter--prevent-default",s,(0,_dom.getPropClass)(l,r),{["size--"+a]:a,"is--animat":i.animat,"is--multiple":d.filterMultiple,"is--active":v}],style:u.style},c.filter&&(!o||v)&&d?((e,t)=>{let l=f.filterStore;var r=l.column;if(!r)return[];var i=h.value.useScrollbar;let{filterMultiple:a,filters:n,slots:o}=r;var r=n||[],s=o?o.filter:null,u=Object.assign({},b._currFilterParams,{option:r[0],$panel:g,$table:_}),t=t?t.renderTableFilter||t.renderFilter:null;if(s)return[(0,_vue.h)("div",{class:"vxe-table--filter-template"},_.callSlot(s,u))];if(e&&t)return[(0,_vue.h)("div",{class:"vxe-table--filter-template"},(0,_vn.getSlotVNs)(t(e,u)))];s=a?l.isAllSelected:!r.some(e=>e._checked),t=a&&l.isIndeterminate;let c=r.map(t=>{var e=t._checked;return(0,_vue.h)("div",{class:["vxe-table--filter-option",{"is--checked":t._checked}],title:t.label,onClick:e=>{O(e,!t._checked,t)}},(a?[(0,_vue.h)("span",{class:["vxe-checkbox--icon",e?getIcon().TABLE_CHECKBOX_CHECKED:getIcon().TABLE_CHECKBOX_UNCHECKED]})]:[]).concat([(0,_vue.h)("span",{class:"vxe-checkbox--label"},(0,_utils.formatText)(t.label,1))]))});return[(0,_vue.h)("div",{class:"vxe-table--filter-header"},[(0,_vue.h)("div",{class:["vxe-table--filter-option",{"is--checked":s,"is--indeterminate":t}],title:getI18n(a?"vxe.table.allTitle":"vxe.table.allFilter"),onClick:e=>{S(e,!l.isAllSelected)}},(a?[(0,_vue.h)("span",{class:["vxe-checkbox--icon",t?getIcon().TABLE_CHECKBOX_INDETERMINATE:s?getIcon().TABLE_CHECKBOX_CHECKED:getIcon().TABLE_CHECKBOX_UNCHECKED]})]:[]).concat([(0,_vue.h)("span",{class:"vxe-checkbox--label"},getI18n("vxe.table.allFilter"))]))]),i?(0,_vue.h)(p,{class:"vxe-table--scrollbar-filter-body",viewClassName:"vxe-table--scrollbar-filter-body-view"},{default:()=>c}):(0,_vue.h)("div",{class:"vxe-table--filter-body"},c)]})(e,t).concat((()=>{var e=f.filterStore,t=e.column;if(!t)return[];var l=h.value,r=x.value,i=E.value,{filterRender:t,filterMultiple:a}=t,{confirmButtonText:l,resetButtonText:n,showFooter:o}=l,r=t&&(0,_utils.isEnableConf)(t)&&t.name?r[t.name]||renderer.get(t.name):null,t=!i&&!e.isAllSelected&&!e.isIndeterminate;let s=!!a;return _xeUtils.default.isBoolean(o)?s=o:r&&(s=!(!1===r.showTableFilterFooter||!1===r.showFilterFooter||!1===r.isFooter)),s?[(0,_vue.h)("div",{class:"vxe-table--filter-footer"},[(0,_vue.h)("button",{class:{"is--disabled":t},disabled:t,onClick:F},l||getI18n("vxe.table.confirmFilter")),(0,_vue.h)("button",{onClick:I},n||getI18n("vxe.table.resetFilter"))])]:[]})()):[])])):renderEmptyElement(g)},g},render(){return this.renderVN()}});