vxe-table 4.16.19 → 4.17.0-beta.0

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

@@ -30,57 +30,19 @@ hooks.add('tableFilterModule', {
       computeFilterOpts,
       computeMouseOpts
     } = $xeTable.getComputeMaps();
-    // 确认筛选
-    const handleFilterConfirmFilter = evnt => {
-      const {
-        filterStore
-      } = reactData;
-      filterStore.options.forEach(option => {
-        option.checked = option._checked;
-      });
-      $xeTable.confirmFilterEvent(evnt);
-    };
-    // （单选）筛选发生改变
-    const changeRadioOption = (evnt, checked, item) => {
-      const {
-        filterStore
-      } = reactData;
-      filterStore.options.forEach(option => {
-        option._checked = false;
-      });
-      item._checked = checked;
-      $xeTable.checkFilterOptions();
-      handleFilterConfirmFilter(evnt);
-    };
-    // （多选）筛选发生改变
-    const changeMultipleOption = (evnt, checked, item) => {
-      item._checked = checked;
-      $xeTable.checkFilterOptions();
-    };
-    /**
-     * 重置筛选
-     * 当筛选面板中的重置按钮被按下时触发
-     * @param {Event} evnt 事件
-     */
-    const handleFilterResetFilter = evnt => {
-      const {
-        filterStore
-      } = reactData;
-      $xeTable.handleClearFilter(filterStore.column);
-      $xeTable.confirmFilterEvent(evnt);
-      if (evnt) {
-        $xeTable.dispatchEvent('clear-filter', {
-          filterList: []
-        }, evnt);
-      }
-    };
     const filterPrivateMethods = {
       checkFilterOptions() {
         const {
           filterStore
         } = reactData;
-        filterStore.isAllSelected = filterStore.options.every(item => item._checked);
-        filterStore.isIndeterminate = !filterStore.isAllSelected && filterStore.options.some(item => item._checked);
+        const {
+          column
+        } = filterStore;
+        if (column) {
+          const filterOptions = column.filters || [];
+          filterStore.isAllSelected = filterOptions.every(item => item._checked);
+          filterStore.isIndeterminate = !filterStore.isAllSelected && filterOptions.some(item => item._checked);
+        }
       },
       /**
        * 点击筛选事件
@@ -223,11 +185,13 @@ hooks.add('tableFilterModule', {
         const filterOpts = computeFilterOpts.value;
         const mouseOpts = computeMouseOpts.value;
         const {
-          field
+          field,
+          filters
         } = column;
+        const filterOptions = filters || [];
         const values = [];
         const datas = [];
-        column.filters.forEach(item => {
+        filterOptions.forEach(item => {
           if (item.checked) {
             values.push(item.value);
             datas.push(item.data);
@@ -282,32 +246,84 @@ hooks.add('tableFilterModule', {
       /**
        * 确认筛选
        * 当筛选面板中的确定按钮被按下时触发
-       * @param {Event} evnt 事件
        */
-      confirmFilterEvent(evnt) {
+      confirmFilterEvent(evnt, column) {
+        if (column) {
+          $xeTable.handleColumnConfirmFilter(column, evnt);
+        }
+      },
+      // （单选）筛选发生改变
+      handleFilterChangeRadioOption(evnt, checked, item) {
         const {
           filterStore
         } = reactData;
         const {
           column
         } = filterStore;
-        $xeTable.handleColumnConfirmFilter(column, evnt);
+        if (column) {
+          const filterOptions = column.filters || [];
+          filterOptions.forEach(option => {
+            option._checked = false;
+          });
+          item._checked = checked;
+          $xeTable.checkFilterOptions();
+          $xeTable.handleFilterConfirmFilter(evnt, column);
+        }
+      },
+      // （多选）筛选发生改变
+      handleFilterChangeMultipleOption(evnt, checked, item) {
+        item._checked = checked;
+        $xeTable.checkFilterOptions();
       },
-      handleFilterChangeRadioOption: changeRadioOption,
-      handleFilterChangeMultipleOption: changeMultipleOption,
       // 筛选发生改变
       handleFilterChangeOption(evnt, checked, item) {
         const {
           filterStore
         } = reactData;
-        if (filterStore.multiple) {
-          changeMultipleOption(evnt, checked, item);
-        } else {
-          changeRadioOption(evnt, checked, item);
+        const {
+          fullColumnIdData
+        } = internalData;
+        let column = filterStore.column;
+        if (!column) {
+          const colRest = fullColumnIdData[item._colId];
+          if (colRest) {
+            column = colRest.column;
+            filterStore.column = column;
+          }
+        }
+        if (column) {
+          if (column.filterMultiple) {
+            $xeTable.handleFilterChangeMultipleOption(evnt, checked, item);
+          } else {
+            $xeTable.handleFilterChangeRadioOption(evnt, checked, item);
+          }
+        }
+      },
+      // 确认筛选
+      handleFilterConfirmFilter(evnt, column) {
+        if (column) {
+          const filterOptions = column.filters || [];
+          filterOptions.forEach(option => {
+            option.checked = option._checked;
+          });
+          $xeTable.confirmFilterEvent(evnt, column);
         }
       },
-      handleFilterConfirmFilter,
-      handleFilterResetFilter
+      /**
+       * 重置筛选
+       * 当筛选面板中的重置按钮被按下时触发
+       */
+      handleFilterResetFilter(evnt, column) {
+        if (column) {
+          $xeTable.handleClearFilter(column);
+          $xeTable.confirmFilterEvent(evnt, column);
+          if (evnt) {
+            $xeTable.dispatchEvent('clear-filter', {
+              filterList: []
+            }, evnt);
+          }
+        }
+      }
     };
     const filterMethods = {
       /**
@@ -344,7 +360,7 @@ hooks.add('tableFilterModule', {
         } = reactData;
         const column = (0, _util.handleFieldOrColumn)($xeTable, fieldOrColumn);
         if (column && column.filters) {
-          column.filters = (0, _util.toFilters)(options || []);
+          column.filters = (0, _util.toFilters)(options || [], column.id);
           if (isUpdate) {
             return $xeTable.handleColumnConfirmFilter(column, null);
           } else {
@@ -393,20 +409,60 @@ hooks.add('tableFilterModule', {
         }
         return (0, _vue.nextTick)();
       },
+      saveFilter(fieldOrColumn) {
+        if (fieldOrColumn) {
+          const column = (0, _util.handleFieldOrColumn)($xeTable, fieldOrColumn);
+          $xeTable.handleFilterConfirmFilter(null, column);
+        }
+        return (0, _vue.nextTick)();
+      },
+      saveFilterByEvent(evnt, fieldOrColumn) {
+        if (fieldOrColumn) {
+          const column = (0, _util.handleFieldOrColumn)($xeTable, fieldOrColumn);
+          $xeTable.handleFilterConfirmFilter(evnt, column);
+        }
+        return (0, _vue.nextTick)();
+      },
+      resetFilter(fieldOrColumn) {
+        if (fieldOrColumn) {
+          const column = (0, _util.handleFieldOrColumn)($xeTable, fieldOrColumn);
+          $xeTable.handleFilterResetFilter(null, column);
+        }
+        return (0, _vue.nextTick)();
+      },
+      resetFilterByEvent(evnt, fieldOrColumn) {
+        if (fieldOrColumn) {
+          const column = (0, _util.handleFieldOrColumn)($xeTable, fieldOrColumn);
+          $xeTable.handleFilterResetFilter(evnt, column);
+        }
+        return (0, _vue.nextTick)();
+      },
       saveFilterPanel() {
-        handleFilterConfirmFilter(null);
+        const {
+          filterStore
+        } = reactData;
+        $xeTable.handleFilterConfirmFilter(null, filterStore.column || null);
         return (0, _vue.nextTick)();
       },
       saveFilterPanelByEvent(evnt) {
-        handleFilterConfirmFilter(evnt);
+        const {
+          filterStore
+        } = reactData;
+        $xeTable.handleFilterConfirmFilter(evnt, filterStore.column || null);
         return (0, _vue.nextTick)();
       },
       resetFilterPanel() {
-        handleFilterResetFilter(null);
+        const {
+          filterStore
+        } = reactData;
+        $xeTable.handleFilterResetFilter(null, filterStore.column || null);
         return (0, _vue.nextTick)();
       },
       resetFilterPanelByEvent(evnt) {
-        handleFilterResetFilter(evnt);
+        const {
+          filterStore
+        } = reactData;
+        $xeTable.handleFilterResetFilter(evnt, filterStore.column || null);
         return (0, _vue.nextTick)();
       },
       getCheckedFilters() {
@@ -419,10 +475,11 @@ hooks.add('tableFilterModule', {
             field,
             filters
           } = column;
+          const filterOptions = filters || [];
           const valueList = [];
           const dataList = [];
-          if (filters && filters.length) {
-            filters.forEach(item => {
+          if (filterOptions) {
+            filterOptions.forEach(item => {
               if (item.checked) {
                 valueList.push(item.value);
                 dataList.push(item.data);

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","saveFilterPanel","saveFilterPanelByEvent","resetFilterPanel","resetFilterPanelByEvent","getCheckedFilters","updateFilterOptionStatus"];hooks.add("tableFilterModule",{setupTable(_){let C=_.xeGrid||_.xeGantt,{props:d,reactData:h,internalData:a}=_,{refElem:n,refTableFilter:k}=_.getRefMaps(),{computeFilterOpts:b,computeMouseOpts:f}=_.getComputeMaps(),i=e=>{var t=h.filterStore;t.options.forEach(e=>{e.checked=e._checked}),_.confirmFilterEvent(e)},o=(e,t,l)=>{var r=h.filterStore;r.options.forEach(e=>{e._checked=!1}),l._checked=t,_.checkFilterOptions(),i(e)},u=(e,t,l)=>{l._checked=t,_.checkFilterOptions()},t=e=>{var t=h.filterStore;_.handleClearFilter(t.column),_.confirmFilterEvent(e),e&&_.dispatchEvent("clear-filter",{filterList:[]},e)};var e={checkFilterOptions(){var e=h.filterStore;e.isAllSelected=e.options.every(e=>e._checked),e.isIndeterminate=!e.isAllSelected&&e.options.some(e=>e._checked)},triggerFilterEvent(e,t,l){let{initStore:r,filterStore:F}=h,g=a.elemStore;if(F.column===t&&F.visible)F.visible=!1;else{let u=n.value,{scrollTop:s,scrollLeft:c,visibleHeight:d,visibleWidth:h}=(0,_dom.getDomNode)();let f=b.value.transfer,v=u.getBoundingClientRect(),p=e.currentTarget;var i=t?t.filterRender:null;let m=i&&(0,_utils.isEnableConf)(i)?renderer.get(i.name):null;_.handleFilterOptions(t),a._currFilterParams=l,F.style=null,F.visible=!0,r.filter=!0,(0,_vue.nextTick)(()=>{if((0,_util.getRefElem)(g["main-header-scroll"])){var r=k.value,r=r?r.getRefMaps().refElem.value:null;if(r){var i=p.getBoundingClientRect(),n=r.querySelector(".vxe-table--filter-header"),a=r.querySelector(".vxe-table--filter-footer"),r=r.offsetWidth,o=r/2;let e=0,t=0,l=0;f?(e=i.left-o+c,t=i.top+p.clientHeight+s,l=Math.min(Math.max(v.height,Math.floor(d/2)),Math.max(80,d-t-(n?n.clientHeight:0)-(a?a.clientHeight:0)-28)),e<16?e=16:e>h-r-16&&(e=h-r-16)):(e=i.left-v.left-o,t=i.top-v.top+p.clientHeight,l=Math.max(40,u.clientHeight-t-(n?n.clientHeight:0)-(a?a.clientHeight:0)-14),e<1?e=1:e>u.clientWidth-r-1&&(e=u.clientWidth-r-1),C&&(o=C.getRefMaps().refElem.value)&&(i=o.getBoundingClientRect(),t+=v.top-i.top)),F.style={top:(0,_dom.toCssUnit)(t),left:(0,_dom.toCssUnit)(e)},m&&!m.tableFilterAutoHeight&&(l=0),F.maxHeight=l}}})}_.dispatchEvent("filter-visible",{column:t,field:t.field,property:t.field,filterList:_.getCheckedFilters(),visible:F.visible},e)},handleClearFilter(e){if(e){var{filters:l,filterRender:r}=e;if(l){r=(0,_utils.isEnableConf)(r)?renderer.get(r.name):null;let t=e.filterResetMethod||(r?r.tableFilterResetMethod||r.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:_})}}},handleColumnConfirmFilter(e,t){var l=d.mouseConfig;let{scrollXLoad:r,scrollYLoad:i}=h;var n=b.value,a=f.value,o=e.field;let u=[],s=[];e.filters.forEach(e=>{e.checked&&(u.push(e.value),s.push(e.data))});var c=_.getCheckedFilters(),e={$table:_,$event:t,column:e,field:o,property:o,values:u,datas:s,filters:c,filterList:c};return n.remote||(_.handleTableData(!0),_.checkSelectionStatus()),l&&a.area&&_.handleFilterEvent&&_.handleFilterEvent(t,e),t&&_.dispatchEvent("filter-change",e,t),_.closeFilter(),_.updateFooter().then(()=>{var{scrollXLoad:e,scrollYLoad:t}=h;if(r||e||i||t)return(r||e)&&_.updateScrollXSpace(),(i||t)&&_.updateScrollYSpace(),_.refreshScroll()}).then(()=>(_.updateCellAreas(),_.recalculate(!0))).then(()=>{setTimeout(()=>_.recalculate(),50)})},confirmFilterEvent(e){var t=h.filterStore,t=t.column;_.handleColumnConfirmFilter(t,e)},handleFilterChangeRadioOption:o,handleFilterChangeMultipleOption:u,handleFilterChangeOption(e,t,l){var r=h.filterStore;r.multiple?u(0,t,l):o(e,t,l)},handleFilterConfirmFilter:i,handleFilterResetFilter:t};return Object.assign(Object.assign({},{openFilter(e){let r=(0,_util.handleFieldOrColumn)(_,e);if(r&&r.filters){let t=a.elemStore,l=r.fixed;return _.scrollToColumn(r).then(()=>{var e=(0,_util.getRefElem)(t[`${l||"main"}-header-wrapper`]||t["main-header-wrapper"]);e&&(e=e.querySelector(`.vxe-header--column.${r.id} .vxe-cell--filter`),(0,_dom.triggerEvent)(e,"click"))})}return(0,_vue.nextTick)()},setFilter(e,t,l){var r=h.filterStore,e=(0,_util.handleFieldOrColumn)(_,e);if(e&&e.filters){if(e.filters=(0,_util.toFilters)(t||[]),l)return _.handleColumnConfirmFilter(e,null);r.visible&&_.handleFilterOptions(e)}return(0,_vue.nextTick)()},clearFilter(e){var t=h.filterStore,l=a.tableFullColumn,r=b.value;let i;return e?(i=(0,_util.handleFieldOrColumn)(_,e))&&_.handleClearFilter(i):l.forEach(_.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)():_.updateData()},saveFilterPanel(){return i(null),(0,_vue.nextTick)()},saveFilterPanelByEvent(e){return i(e),(0,_vue.nextTick)()},resetFilterPanel(){return t(null),(0,_vue.nextTick)()},resetFilterPanelByEvent(e){return t(e),(0,_vue.nextTick)()},getCheckedFilters(){var e=a.tableFullColumn;let n=[];return e.forEach(e=>{var{field:t,filters:l}=e;let r=[],i=[];l&&l.length&&(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","saveFilterPanel","saveFilterPanelByEvent","resetFilterPanel","resetFilterPanelByEvent","getCheckedFilters","updateFilterOptionStatus"];hooks.add("tableFilterModule",{setupTable(g){let C=g.xeGrid||g.xeGantt,{props:d,reactData:h,internalData:a}=g,{refElem:n,refTableFilter:k}=g.getRefMaps(),{computeFilterOpts:b,computeMouseOpts:f}=g.getComputeMaps();var e={checkFilterOptions(){var e=h.filterStore,t=e.column;t&&(t=t.filters||[],e.isAllSelected=t.every(e=>e._checked),e.isIndeterminate=!e.isAllSelected&&t.some(e=>e._checked))},triggerFilterEvent(e,t,l){let{initStore:r,filterStore:p}=h,_=a.elemStore;if(p.column===t&&p.visible)p.visible=!1;else{let o=n.value,{scrollTop:s,scrollLeft:c,visibleHeight:d,visibleWidth:h}=(0,_dom.getDomNode)();let f=b.value.transfer,F=o.getBoundingClientRect(),v=e.currentTarget;var i=t?t.filterRender:null;let m=i&&(0,_utils.isEnableConf)(i)?renderer.get(i.name):null;g.handleFilterOptions(t),a._currFilterParams=l,p.style=null,p.visible=!0,r.filter=!0,(0,_vue.nextTick)(()=>{if((0,_util.getRefElem)(_["main-header-scroll"])){var r=k.value,r=r?r.getRefMaps().refElem.value:null;if(r){var i=v.getBoundingClientRect(),n=r.querySelector(".vxe-table--filter-header"),a=r.querySelector(".vxe-table--filter-footer"),r=r.offsetWidth,u=r/2;let e=0,t=0,l=0;f?(e=i.left-u+c,t=i.top+v.clientHeight+s,l=Math.min(Math.max(F.height,Math.floor(d/2)),Math.max(80,d-t-(n?n.clientHeight:0)-(a?a.clientHeight:0)-28)),e<16?e=16:e>h-r-16&&(e=h-r-16)):(e=i.left-F.left-u,t=i.top-F.top+v.clientHeight,l=Math.max(40,o.clientHeight-t-(n?n.clientHeight:0)-(a?a.clientHeight:0)-14),e<1?e=1:e>o.clientWidth-r-1&&(e=o.clientWidth-r-1),C&&(u=C.getRefMaps().refElem.value)&&(i=u.getBoundingClientRect(),t+=F.top-i.top)),p.style={top:(0,_dom.toCssUnit)(t),left:(0,_dom.toCssUnit)(e)},m&&!m.tableFilterAutoHeight&&(l=0),p.maxHeight=l}}})}g.dispatchEvent("filter-visible",{column:t,field:t.field,property:t.field,filterList:g.getCheckedFilters(),visible:p.visible},e)},handleClearFilter(e){if(e){var{filters:l,filterRender:r}=e;if(l){r=(0,_utils.isEnableConf)(r)?renderer.get(r.name):null;let t=e.filterResetMethod||(r?r.tableFilterResetMethod||r.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:g})}}},handleColumnConfirmFilter(e,t){var l=d.mouseConfig;let{scrollXLoad:r,scrollYLoad:i}=h;var n=b.value,a=f.value,{field:u,filters:o}=e;let s=[],c=[];(o||[]).forEach(e=>{e.checked&&(s.push(e.value),c.push(e.data))});o=g.getCheckedFilters(),e={$table:g,$event:t,column:e,field:u,property:u,values:s,datas:c,filters:o,filterList:o};return n.remote||(g.handleTableData(!0),g.checkSelectionStatus()),l&&a.area&&g.handleFilterEvent&&g.handleFilterEvent(t,e),t&&g.dispatchEvent("filter-change",e,t),g.closeFilter(),g.updateFooter().then(()=>{var{scrollXLoad:e,scrollYLoad:t}=h;if(r||e||i||t)return(r||e)&&g.updateScrollXSpace(),(i||t)&&g.updateScrollYSpace(),g.refreshScroll()}).then(()=>(g.updateCellAreas(),g.recalculate(!0))).then(()=>{setTimeout(()=>g.recalculate(),50)})},confirmFilterEvent(e,t){t&&g.handleColumnConfirmFilter(t,e)},handleFilterChangeRadioOption(e,t,l){var r=h.filterStore,r=r.column;r&&((r.filters||[]).forEach(e=>{e._checked=!1}),l._checked=t,g.checkFilterOptions(),g.handleFilterConfirmFilter(e,r))},handleFilterChangeMultipleOption(e,t,l){l._checked=t,g.checkFilterOptions()},handleFilterChangeOption(e,t,l){var r=h.filterStore,i=a.fullColumnIdData;let n=r.column;n||(i=i[l._colId])&&(n=i.column,r.column=n),n&&(n.filterMultiple?g.handleFilterChangeMultipleOption(e,t,l):g.handleFilterChangeRadioOption(e,t,l))},handleFilterConfirmFilter(e,t){t&&((t.filters||[]).forEach(e=>{e.checked=e._checked}),g.confirmFilterEvent(e,t))},handleFilterResetFilter(e,t){t&&(g.handleClearFilter(t),g.confirmFilterEvent(e,t),e)&&g.dispatchEvent("clear-filter",{filterList:[]},e)}};return Object.assign(Object.assign({},{openFilter(e){let r=(0,_util.handleFieldOrColumn)(g,e);if(r&&r.filters){let t=a.elemStore,l=r.fixed;return g.scrollToColumn(r).then(()=>{var e=(0,_util.getRefElem)(t[`${l||"main"}-header-wrapper`]||t["main-header-wrapper"]);e&&(e=e.querySelector(`.vxe-header--column.${r.id} .vxe-cell--filter`),(0,_dom.triggerEvent)(e,"click"))})}return(0,_vue.nextTick)()},setFilter(e,t,l){var r=h.filterStore,e=(0,_util.handleFieldOrColumn)(g,e);if(e&&e.filters){if(e.filters=(0,_util.toFilters)(t||[],e.id),l)return g.handleColumnConfirmFilter(e,null);r.visible&&g.handleFilterOptions(e)}return(0,_vue.nextTick)()},clearFilter(e){var t=h.filterStore,l=a.tableFullColumn,r=b.value;let i;return e?(i=(0,_util.handleFieldOrColumn)(g,e))&&g.handleClearFilter(i):l.forEach(g.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)():g.updateData()},saveFilter(e){return e&&(e=(0,_util.handleFieldOrColumn)(g,e),g.handleFilterConfirmFilter(null,e)),(0,_vue.nextTick)()},saveFilterByEvent(e,t){return t&&(t=(0,_util.handleFieldOrColumn)(g,t),g.handleFilterConfirmFilter(e,t)),(0,_vue.nextTick)()},resetFilter(e){return e&&(e=(0,_util.handleFieldOrColumn)(g,e),g.handleFilterResetFilter(null,e)),(0,_vue.nextTick)()},resetFilterByEvent(e,t){return t&&(t=(0,_util.handleFieldOrColumn)(g,t),g.handleFilterResetFilter(e,t)),(0,_vue.nextTick)()},saveFilterPanel(){var e=h.filterStore;return g.handleFilterConfirmFilter(null,e.column||null),(0,_vue.nextTick)()},saveFilterPanelByEvent(e){var t=h.filterStore;return g.handleFilterConfirmFilter(e,t.column||null),(0,_vue.nextTick)()},resetFilterPanel(){var e=h.filterStore;return g.handleFilterResetFilter(null,e.column||null),(0,_vue.nextTick)()},resetFilterPanelByEvent(e){var t=h.filterStore;return g.handleFilterResetFilter(e,t.column||null),(0,_vue.nextTick)()},getCheckedFilters(){var e=a.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

@@ -16,12 +16,16 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 const {
   getI18n,
   getIcon,
-  renderer
+  renderer,
+  renderEmptyElement
 } = _ui.VxeUI;
 var _default = exports.default = (0, _comp.defineVxeComponent)({
   name: 'VxeTableFilterPanel',
   props: {
-    filterStore: Object
+    filterStore: {
+      type: Object,
+      default: () => ({})
+    }
   },
   setup(props, context) {
     const xID = _xeUtils.default.uniqueId();
@@ -48,17 +52,25 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const {
         filterStore
       } = props;
-      return filterStore && filterStore.options.some(option => option.checked);
+      const {
+        column
+      } = filterStore;
+      return column && column.filters && column.filters.some(option => option.checked);
     });
     // 全部筛选事件
     const filterCheckAllEvent = (evnt, value) => {
       const {
         filterStore
       } = props;
-      filterStore.options.forEach(option => {
-        option._checked = value;
-        option.checked = value;
-      });
+      const {
+        column
+      } = filterStore;
+      if (column && column.filters) {
+        column.filters.forEach(option => {
+          option._checked = value;
+          option.checked = value;
+        });
+      }
       filterStore.isAllSelected = value;
       filterStore.isIndeterminate = false;
     };
@@ -67,10 +79,13 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
      *************************/
     // 确认筛选
     const confirmFilter = evnt => {
+      const {
+        filterStore
+      } = props;
       if (!evnt) {
         (0, _log.warnLog)('vxe.error.delFunc', ['confirmFilter', 'saveFilterPanelByEvent']);
       }
-      $xeTable.handleFilterConfirmFilter(evnt || new Event('click'));
+      $xeTable.handleFilterConfirmFilter(evnt || new Event('click'), filterStore.column || null);
     };
     // （单选）筛选发生改变
     const changeRadioOption = (evnt, checked, item) => {
@@ -82,7 +97,10 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
      * @param {Event} evnt 事件
      */
     const resetFilter = evnt => {
-      $xeTable.handleFilterResetFilter(evnt);
+      const {
+        filterStore
+      } = props;
+      $xeTable.handleFilterResetFilter(evnt, filterStore.column || null);
     };
     // （多选）筛选发生改变
     const changeMultipleOption = (evnt, checked, item) => {
@@ -96,7 +114,10 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const {
         filterStore
       } = props;
-      if (filterStore.multiple) {
+      const {
+        column
+      } = filterStore;
+      if (column && column.filterMultiple) {
         filterCheckAllEvent(evnt, checked);
       } else {
         resetFilter(evnt);
@@ -120,10 +141,17 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       } = props;
       const {
         column,
-        multiple,
         maxHeight
       } = filterStore;
-      const slots = column ? column.slots : null;
+      if (!column) {
+        return [];
+      }
+      const {
+        filterMultiple,
+        filters,
+        slots
+      } = column;
+      const filterOptions = filters || [];
       const filterSlot = slots ? slots.filter : null;
       const params = Object.assign({}, tableInternalData._currFilterParams, {
         $panel: $xeFilterPanel,
@@ -137,7 +165,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
             maxHeight: (0, _dom.toCssUnit)(maxHeight)
           } : {}
         }, $xeTable.callSlot(filterSlot, params))];
-      } else if (rtFilter) {
+      } else if (filterRender && rtFilter) {
         return [(0, _vue.h)('div', {
           class: 'vxe-table--filter-template',
           style: maxHeight ? {
@@ -145,8 +173,8 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           } : {}
         }, (0, _vn.getSlotVNs)(rtFilter(filterRender, params)))];
       }
-      const isAllChecked = multiple ? filterStore.isAllSelected : !filterStore.options.some(item => item._checked);
-      const isAllIndeterminate = multiple && filterStore.isIndeterminate;
+      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', {
@@ -154,11 +182,11 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           'is--checked': isAllChecked,
           'is--indeterminate': isAllIndeterminate
         }],
-        title: getI18n(multiple ? 'vxe.table.allTitle' : 'vxe.table.allFilter'),
+        title: getI18n(filterMultiple ? 'vxe.table.allTitle' : 'vxe.table.allFilter'),
         onClick: evnt => {
           changeAllOption(evnt, !filterStore.isAllSelected);
         }
-      }, (multiple ? [(0, _vue.h)('span', {
+      }, (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'
@@ -167,7 +195,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         style: maxHeight ? {
           maxHeight: (0, _dom.toCssUnit)(maxHeight)
         } : {}
-      }, filterStore.options.map(item => {
+      }, filterOptions.map(item => {
         const isChecked = item._checked;
         const isIndeterminate = false;
         return (0, _vue.h)('li', {
@@ -178,7 +206,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           onClick: evnt => {
             changeOption(evnt, !item._checked, item);
           }
-        }, (multiple ? [(0, _vue.h)('span', {
+        }, (filterMultiple ? [(0, _vue.h)('span', {
           class: ['vxe-checkbox--icon', isIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : isChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED]
         })] : []).concat([(0, _vue.h)('span', {
           class: 'vxe-checkbox--label'
@@ -190,17 +218,20 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         filterStore
       } = props;
       const {
-        column,
-        multiple
+        column
       } = filterStore;
+      if (!column) {
+        return [];
+      }
       const filterOpts = computeFilterOpts.value;
       const hasCheckOption = computeHasCheckOption.value;
       const {
-        filterRender
+        filterRender,
+        filterMultiple
       } = column;
       const compConf = (0, _utils.isEnableConf)(filterRender) ? 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) ? [(0, _vue.h)('div', {
+      return (compConf ? !(compConf.showTableFilterFooter === false || compConf.showFilterFooter === false || compConf.isFooter === false) : filterMultiple) ? [(0, _vue.h)('div', {
         class: 'vxe-table--filter-footer'
       }, [(0, _vue.h)('button', {
         class: {
@@ -221,11 +252,13 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       } = tableReactData;
       const {
         visible,
-        multiple,
         column
       } = filterStore;
+      if (!column) {
+        return renderEmptyElement($xeFilterPanel);
+      }
       const filterRender = column ? column.filterRender : null;
-      const compConf = (0, _utils.isEnableConf)(filterRender) ? renderer.get(filterRender.name) : null;
+      const compConf = filterRender && (0, _utils.isEnableConf)(filterRender) ? renderer.get(filterRender.name) : null;
       const filterClassName = compConf ? compConf.tableFilterClassName || compConf.filterClassName : '';
       const params = Object.assign({}, tableInternalData._currFilterParams, {
         $panel: $xeFilterPanel,
@@ -250,7 +283,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         class: ['vxe-table--filter-wrapper', 'filter--prevent-default', className, (0, _dom.getPropClass)(filterClassName, params), {
           [`size--${vSize}`]: vSize,
           'is--animat': tableProps.animat,
-          'is--multiple': multiple,
+          'is--multiple': column.filterMultiple,
           'is--active': visible
         }],
         style: filterStore.style

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