vxe-table 4.16.20 → 4.17.0-beta.0

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

@@ -14,47 +14,15 @@ hooks.add('tableFilterModule', {
         const { props, reactData, internalData } = $xeTable;
         const { refElem, refTableFilter } = $xeTable.getRefMaps();
         const { 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);
+                }
             },
             /**
              * 点击筛选事件
@@ -170,10 +138,11 @@ hooks.add('tableFilterModule', {
                 const { scrollXLoad: oldScrollXLoad, scrollYLoad: oldScrollYLoad } = reactData;
                 const filterOpts = computeFilterOpts.value;
                 const mouseOpts = computeMouseOpts.value;
-                const { field } = column;
+                const { 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);
@@ -215,27 +184,75 @@ 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);
+                const { fullColumnIdData } = internalData;
+                let column = filterStore.column;
+                if (!column) {
+                    const colRest = fullColumnIdData[item._colId];
+                    if (colRest) {
+                        column = colRest.column;
+                        filterStore.column = column;
+                    }
                 }
-                else {
-                    changeRadioOption(evnt, checked, item);
+                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 = {
             /**
@@ -266,7 +283,7 @@ hooks.add('tableFilterModule', {
                 const { filterStore } = reactData;
                 const column = handleFieldOrColumn($xeTable, fieldOrColumn);
                 if (column && column.filters) {
-                    column.filters = toFilters(options || []);
+                    column.filters = toFilters(options || [], column.id);
                     if (isUpdate) {
                         return $xeTable.handleColumnConfirmFilter(column, null);
                     }
@@ -313,20 +330,52 @@ hooks.add('tableFilterModule', {
                 }
                 return nextTick();
             },
+            saveFilter(fieldOrColumn) {
+                if (fieldOrColumn) {
+                    const column = handleFieldOrColumn($xeTable, fieldOrColumn);
+                    $xeTable.handleFilterConfirmFilter(null, column);
+                }
+                return nextTick();
+            },
+            saveFilterByEvent(evnt, fieldOrColumn) {
+                if (fieldOrColumn) {
+                    const column = handleFieldOrColumn($xeTable, fieldOrColumn);
+                    $xeTable.handleFilterConfirmFilter(evnt, column);
+                }
+                return nextTick();
+            },
+            resetFilter(fieldOrColumn) {
+                if (fieldOrColumn) {
+                    const column = handleFieldOrColumn($xeTable, fieldOrColumn);
+                    $xeTable.handleFilterResetFilter(null, column);
+                }
+                return nextTick();
+            },
+            resetFilterByEvent(evnt, fieldOrColumn) {
+                if (fieldOrColumn) {
+                    const column = handleFieldOrColumn($xeTable, fieldOrColumn);
+                    $xeTable.handleFilterResetFilter(evnt, column);
+                }
+                return nextTick();
+            },
             saveFilterPanel() {
-                handleFilterConfirmFilter(null);
+                const { filterStore } = reactData;
+                $xeTable.handleFilterConfirmFilter(null, filterStore.column || null);
                 return nextTick();
             },
             saveFilterPanelByEvent(evnt) {
-                handleFilterConfirmFilter(evnt);
+                const { filterStore } = reactData;
+                $xeTable.handleFilterConfirmFilter(evnt, filterStore.column || null);
                 return nextTick();
             },
             resetFilterPanel() {
-                handleFilterResetFilter(null);
+                const { filterStore } = reactData;
+                $xeTable.handleFilterResetFilter(null, filterStore.column || null);
                 return nextTick();
             },
             resetFilterPanelByEvent(evnt) {
-                handleFilterResetFilter(evnt);
+                const { filterStore } = reactData;
+                $xeTable.handleFilterResetFilter(evnt, filterStore.column || null);
                 return nextTick();
             },
             getCheckedFilters() {
@@ -334,10 +383,11 @@ hooks.add('tableFilterModule', {
                 const filterList = [];
                 tableFullColumn.forEach((column) => {
                     const { 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/es/table/module/filter/panel.js

@@ -6,11 +6,14 @@ import { getPropClass, toCssUnit } from '../../../ui/src/dom';
 import { getSlotVNs } from '../../../ui/src/vn';
 import { warnLog } from '../../../ui/src/log';
 import XEUtils from 'xe-utils';
-const { getI18n, getIcon, renderer } = VxeUI;
+const { getI18n, getIcon, renderer, renderEmptyElement } = VxeUI;
 export default defineVxeComponent({
     name: 'VxeTableFilterPanel',
     props: {
-        filterStore: Object
+        filterStore: {
+            type: Object,
+            default: () => ({})
+        }
     },
     setup(props, context) {
         const xID = XEUtils.uniqueId();
@@ -29,15 +32,19 @@ export default defineVxeComponent({
         };
         const computeHasCheckOption = computed(() => {
             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;
         };
@@ -46,10 +53,11 @@ export default defineVxeComponent({
          *************************/
         // 确认筛选
         const confirmFilter = (evnt) => {
+            const { filterStore } = props;
             if (!evnt) {
                 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) => {
@@ -61,7 +69,8 @@ export default defineVxeComponent({
          * @param {Event} evnt 事件
          */
         const resetFilter = (evnt) => {
-            $xeTable.handleFilterResetFilter(evnt);
+            const { filterStore } = props;
+            $xeTable.handleFilterResetFilter(evnt, filterStore.column || null);
         };
         // （多选）筛选发生改变
         const changeMultipleOption = (evnt, checked, item) => {
@@ -73,7 +82,8 @@ export default defineVxeComponent({
         };
         const changeAllOption = (evnt, checked) => {
             const { filterStore } = props;
-            if (filterStore.multiple) {
+            const { column } = filterStore;
+            if (column && column.filterMultiple) {
                 filterCheckAllEvent(evnt, checked);
             }
             else {
@@ -94,8 +104,12 @@ export default defineVxeComponent({
         Object.assign($xeFilterPanel, filterPanelMethods);
         const renderOptions = (filterRender, compConf) => {
             const { filterStore } = props;
-            const { column, multiple, maxHeight } = filterStore;
-            const slots = column ? column.slots : null;
+            const { column, maxHeight } = filterStore;
+            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, $table: $xeTable });
             const rtFilter = compConf ? (compConf.renderTableFilter || compConf.renderFilter) : null;
@@ -111,7 +125,7 @@ export default defineVxeComponent({
                     }, $xeTable.callSlot(filterSlot, params))
                 ];
             }
-            else if (rtFilter) {
+            else if (filterRender && rtFilter) {
                 return [
                     h('div', {
                         class: 'vxe-table--filter-template',
@@ -123,8 +137,8 @@ export default defineVxeComponent({
                     }, 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 [
                 h('ul', {
                     class: 'vxe-table--filter-header'
@@ -134,11 +148,11 @@ export default 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
+                    }, (filterMultiple
                         ? [
                             h('span', {
                                 class: ['vxe-checkbox--icon', isAllIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : (isAllChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED)]
@@ -157,7 +171,7 @@ export default defineVxeComponent({
                             maxHeight: toCssUnit(maxHeight)
                         }
                         : {}
-                }, filterStore.options.map((item) => {
+                }, filterOptions.map((item) => {
                     const isChecked = item._checked;
                     const isIndeterminate = false;
                     return h('li', {
@@ -168,7 +182,7 @@ export default defineVxeComponent({
                         onClick: (evnt) => {
                             changeOption(evnt, !item._checked, item);
                         }
-                    }, (multiple
+                    }, (filterMultiple
                         ? [
                             h('span', {
                                 class: ['vxe-checkbox--icon', isIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : (isChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED)]
@@ -184,13 +198,16 @@ export default defineVxeComponent({
         };
         const renderFooters = () => {
             const { filterStore } = props;
-            const { column, multiple } = filterStore;
+            const { column } = filterStore;
+            if (!column) {
+                return [];
+            }
             const filterOpts = computeFilterOpts.value;
             const hasCheckOption = computeHasCheckOption.value;
-            const { filterRender } = column;
+            const { filterRender, filterMultiple } = column;
             const compConf = 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)
+            return (compConf ? !(compConf.showTableFilterFooter === false || compConf.showFilterFooter === false || compConf.isFooter === false) : filterMultiple)
                 ? [
                     h('div', {
                         class: 'vxe-table--filter-footer'
@@ -212,9 +229,12 @@ export default defineVxeComponent({
         const renderVN = () => {
             const { filterStore } = props;
             const { initStore } = tableReactData;
-            const { visible, multiple, column } = filterStore;
+            const { visible, column } = filterStore;
+            if (!column) {
+                return renderEmptyElement($xeFilterPanel);
+            }
             const filterRender = column ? column.filterRender : null;
-            const compConf = isEnableConf(filterRender) ? renderer.get(filterRender.name) : null;
+            const compConf = filterRender && isEnableConf(filterRender) ? renderer.get(filterRender.name) : null;
             const filterClassName = compConf ? (compConf.tableFilterClassName || compConf.filterClassName) : '';
             const params = Object.assign({}, tableInternalData._currFilterParams, { $panel: $xeFilterPanel, $table: $xeTable });
             const tableProps = $xeTable.props;
@@ -236,7 +256,7 @@ export default defineVxeComponent({
                         {
                             [`size--${vSize}`]: vSize,
                             'is--animat': tableProps.animat,
-                            'is--multiple': multiple,
+                            'is--multiple': column.filterMultiple,
                             'is--active': visible
                         }
                     ],

package/es/table/render/index.js

@@ -3,7 +3,7 @@ import XEUtils from 'xe-utils';
 import { VxeUI } from '../../ui';
 import { getCellValue, setCellValue } from '../../table/src/util';
 import { getFuncText, formatText, isEmptyValue } from '../../ui/src/utils';
-import { getOnName, getModelEvent, getChangeEvent } from '../../ui/src/vn';
+import { getOnName, getModelEvent, getChangeEvent, hasInputType } from '../../ui/src/vn';
 import { errLog } from '../../ui/src/log';
 const { getConfig, renderer, getI18n, getComponent } = VxeUI;
 const componentDefaultModelProp = 'modelValue';
@@ -38,9 +38,13 @@ function getDefaultComponent({ name }) {
 function getOldComponent({ name }) {
     return resolveComponent(getOldComponentName(name));
 }
-function handleConfirmFilter(params, checked, option) {
-    const { $panel } = params;
-    $panel.changeOption({}, checked, option);
+function updateFilterChangeOption(params, checked, option) {
+    const { $table } = params;
+    $table.updateFilterOptionStatus(option, checked);
+}
+function saveFilterEvent(params) {
+    const { $table, column } = params;
+    $table.saveFilterByEvent(new Event('change'), column);
 }
 function getNativeAttrs(renderOpts) {
     let { name, attrs } = renderOpts;
@@ -137,6 +141,7 @@ function getNativeElementOns(renderOpts, params, eFns) {
     return ons;
 }
 const blurEvent = 'blur';
+const clearEvent = 'clear';
 /**
  * 组件事件处理
  * @param renderOpts
@@ -148,7 +153,7 @@ function getComponentOns(renderOpts, params, eFns, eventOns) {
     const { events } = renderOpts;
     const modelEvent = getModelEvent(renderOpts);
     const changeEvent = getChangeEvent(renderOpts);
-    const { model: modelFunc, change: changeFunc, blur: blurFunc } = eFns || {};
+    const { model: modelFunc, change: changeFunc, blur: blurFunc, clear: clearFunc } = eFns || {};
     const ons = {};
     XEUtils.objectEach(events, (func, key) => {
         ons[getOnName(key)] = function (...args) {
@@ -182,6 +187,14 @@ function getComponentOns(renderOpts, params, eFns, eventOns) {
             }
         };
     }
+    if (clearFunc) {
+        ons[getOnName(clearEvent)] = function (...args) {
+            clearFunc(...args);
+            if (events && events[clearEvent]) {
+                events[clearEvent](params, ...args);
+            }
+        };
+    }
     return eventOns ? Object.assign(ons, eventOns) : ons;
 }
 function getEditOns(renderOpts, params) {
@@ -227,10 +240,56 @@ function getFilterOns(renderOpts, params, option) {
             option.data = value;
         },
         change() {
-            handleConfirmFilter(params, !XEUtils.eqNull(option.data), option);
+            updateFilterChangeOption(params, !isEmptyValue(option.data), option);
         },
         blur() {
-            handleConfirmFilter(params, !XEUtils.eqNull(option.data), option);
+            updateFilterChangeOption(params, !isEmptyValue(option.data), option);
+        }
+    });
+}
+function getFloatingFilterOns(renderOpts, params, option) {
+    const { $table, column } = params;
+    if (hasInputType(renderOpts)) {
+        return getComponentOns(renderOpts, params, {
+            model(value) {
+                // 处理 model 值双向绑定
+                option.data = value;
+            },
+            change() {
+                updateFilterChangeOption(params, !isEmptyValue(option.data), option);
+            },
+            clear() {
+                updateFilterChangeOption(params, !isEmptyValue(option.data), option);
+                saveFilterEvent(params);
+            },
+            blur() {
+                $table.saveFilterByEvent(new Event('change'), column);
+            }
+        }, renderOpts.name === 'VxeNumberInput'
+            ? {
+                [getOnName('plus-number')]() {
+                    updateFilterChangeOption(params, !isEmptyValue(option.data), option);
+                    saveFilterEvent(params);
+                },
+                [getOnName('minus-number')]() {
+                    updateFilterChangeOption(params, !isEmptyValue(option.data), option);
+                    saveFilterEvent(params);
+                }
+            }
+            : {});
+    }
+    return getComponentOns(renderOpts, params, {
+        model(value) {
+            // 处理 model 值双向绑定
+            option.data = value;
+        },
+        clear() {
+            updateFilterChangeOption(params, !isEmptyValue(option.data), option);
+            $table.saveFilterByEvent(new Event('change'), column);
+        },
+        change() {
+            updateFilterChangeOption(params, !isEmptyValue(option.data), option);
+            $table.saveFilterByEvent(new Event('change'), column);
         }
     });
 }
@@ -279,10 +338,10 @@ function getNativeFilterOns(renderOpts, params, option) {
             }
         },
         change() {
-            handleConfirmFilter(params, !XEUtils.eqNull(option.data), option);
+            updateFilterChangeOption(params, !XEUtils.eqNull(option.data), option);
         },
         blur() {
-            handleConfirmFilter(params, !XEUtils.eqNull(option.data), option);
+            updateFilterChangeOption(params, !XEUtils.eqNull(option.data), option);
         }
     });
 }
@@ -405,6 +464,18 @@ function defaultFilterRender(renderOpts, params) {
         return h(getDefaultComponent(renderOpts), Object.assign(Object.assign({ key: oIndex }, getCellEditFilterProps(renderOpts, renderOpts, optionValue)), getFilterOns(renderOpts, params, option)));
     });
 }
+function defaultFloatingFilterRender(renderOpts, params) {
+    const { option } = params;
+    const optionValue = option.data;
+    return [
+        h(getDefaultComponent(renderOpts), Object.assign(Object.assign({}, getCellEditFilterProps(renderOpts, renderOpts, optionValue)), getFloatingFilterOns(renderOpts, params, option)))
+    ];
+}
+function defaultFilterOptions() {
+    return [
+        { data: null }
+    ];
+}
 /**
  * 已废弃
  * @deprecated
@@ -627,7 +698,9 @@ renderer.mixin({
             return getCellLabelVNs(renderOpts, params, cellValue);
         },
         renderTableDefault: defaultEditRender,
+        createTableFilterOptions: defaultFilterOptions,
         renderTableFilter: defaultFilterRender,
+        renderTableFloatingFilter: defaultFloatingFilterRender,
         tableFilterDefaultMethod: handleInputFilterMethod
     },
     FormatNumberInput: {
@@ -681,7 +754,9 @@ renderer.mixin({
             return getFuncText(itemValue, 1);
         },
         renderTableDefault: defaultEditRender,
+        createTableFilterOptions: defaultFilterOptions,
         renderTableFilter: defaultFilterRender,
+        renderTableFloatingFilter: defaultFloatingFilterRender,
         tableFilterDefaultMethod: handleInputFilterMethod,
         tableExportMethod(params) {
             const { row, column } = params;
@@ -704,7 +779,9 @@ renderer.mixin({
             return getCellLabelVNs(renderOpts, params, cellValue);
         },
         renderTableDefault: defaultEditRender,
+        createTableFilterOptions: defaultFilterOptions,
         renderTableFilter: defaultFilterRender,
+        renderTableFloatingFilter: defaultFloatingFilterRender,
         tableFilterDefaultMethod: handleFilterMethod
     },
     VxeDateRangePicker: {
@@ -803,6 +880,7 @@ renderer.mixin({
         renderTableCell(renderOpts, params) {
             return getCellLabelVNs(renderOpts, params, getSelectCellValue(renderOpts, params));
         },
+        createTableFilterOptions: defaultFilterOptions,
         renderTableFilter(renderOpts, params) {
             const { column } = params;
             const { options, optionProps, optionGroups, optionGroupProps } = renderOpts;
@@ -811,6 +889,12 @@ renderer.mixin({
                 return h(getDefaultComponent(renderOpts), Object.assign(Object.assign({ key: oIndex }, getCellEditFilterProps(renderOpts, params, optionValue, { options, optionProps, optionGroups, optionGroupProps })), getFilterOns(renderOpts, params, option)));
             });
         },
+        renderTableFloatingFilter(renderOpts, params) {
+            const { option } = params;
+            const { options, optionProps, optionGroups, optionGroupProps } = renderOpts;
+            const optionValue = option.data;
+            return h(getDefaultComponent(renderOpts), Object.assign(Object.assign({}, getCellEditFilterProps(renderOpts, params, optionValue, { options, optionProps, optionGroups, optionGroupProps })), getFloatingFilterOns(renderOpts, params, option)));
+        },
         tableFilterDefaultMethod: handleFilterMethod,
         tableExportMethod: handleExportSelectMethod
     },

package/es/table/src/column.js

@@ -91,6 +91,8 @@ export const columnProps = {
     filterRecoverMethod: Function,
     // 筛选模板配置项
     filterRender: Object,
+    // 是否显示浮动筛选
+    floatingFilters: Object,
     // 设置为分组节点
     rowGroupNode: Boolean,
     // 设置为树节点