vxe-table 4.16.20 → 4.17.0-beta.1

package/es/table/src/columnInfo.js

@@ -1,9 +1,9 @@
 import XEUtils from 'xe-utils';
 import { VxeUI } from '../../ui';
 import { toFilters } from './util';
-import { getFuncText } from '../../ui/src/utils';
+import { isEnableConf, getFuncText } from '../../ui/src/utils';
 import { warnLog, errLog } from '../../ui/src/log';
-const { getI18n, formats } = VxeUI;
+const { getI18n, formats, renderer } = VxeUI;
 export class ColumnInfo {
     /* eslint-disable @typescript-eslint/no-use-before-define */
     constructor($xeTable, _vm, { renderHeader, renderCell, renderFooter, renderData } = {}) {
@@ -11,9 +11,13 @@ export class ColumnInfo {
         const $xeGrid = $xeTable.xeGrid;
         const $xeGantt = $xeTable.xeGantt;
         const $xeGGWrapper = $xeGrid || $xeGantt;
-        const { field, editRender } = _vm;
+        const { field, editRender, filterRender } = _vm;
+        const colId = _vm.colId || XEUtils.uniqueId('col_');
         const formatter = _vm.formatter;
         const visible = XEUtils.isBoolean(_vm.visible) ? _vm.visible : true;
+        const flCompConf = isEnableConf(filterRender) ? renderer.get(filterRender.name) : null;
+        const ctFilterOptions = flCompConf ? flCompConf.createTableFilterOptions : null;
+        const filters = toFilters(_vm.filters, colId);
         const types = ['seq', 'checkbox', 'radio', 'expand', 'html'];
         if (_vm.type && types.indexOf(_vm.type) === -1) {
             warnLog('vxe.error.errProp', [`type=${_vm.type}`, types.join(', ')]);
@@ -87,12 +91,13 @@ export class ColumnInfo {
             sortable: _vm.sortable,
             sortBy: _vm.sortBy,
             sortType: _vm.sortType,
-            filters: toFilters(_vm.filters),
+            filters: filters,
             filterMultiple: XEUtils.isBoolean(_vm.filterMultiple) ? _vm.filterMultiple : true,
             filterMethod: _vm.filterMethod,
             filterResetMethod: _vm.filterResetMethod,
             filterRecoverMethod: _vm.filterRecoverMethod,
-            filterRender: _vm.filterRender,
+            filterRender: filterRender,
+            floatingFilters: _vm.floatingFilters,
             rowGroupNode: _vm.rowGroupNode,
             treeNode: _vm.treeNode,
             dragSort: _vm.dragSort,
@@ -111,7 +116,7 @@ export class ColumnInfo {
             // 自定义参数
             params: _vm.params,
             // 渲染属性
-            id: _vm.colId || XEUtils.uniqueId('col_'),
+            id: colId,
             parentId: null,
             visible,
             // 内部属性（一旦被使用，将导致不可升级版本）
@@ -154,6 +159,9 @@ export class ColumnInfo {
             // 单元格插槽，只对 grid 有效
             slots: _vm.slots
         });
+        if (ctFilterOptions && (!filters || !filters.length)) {
+            this.filters = toFilters(ctFilterOptions({ $table: $xeTable, column: this }), colId);
+        }
         if ($xeGGWrapper) {
             const { computeProxyOpts } = $xeGGWrapper.getComputeMaps();
             const proxyOpts = computeProxyOpts.value;

package/es/table/src/header.js

@@ -2,7 +2,9 @@ import { h, ref, inject, nextTick, watch, onMounted, onUnmounted } from 'vue';
 import { defineVxeComponent } from '../../ui/src/comp';
 import XEUtils from 'xe-utils';
 import { VxeUI } from '../../ui';
+import { isEnableConf } from '../../ui/src/utils';
 import { getCalcHeight, convertHeaderColumnToRows, convertHeaderToGridRows } from './util';
+import { getSlotVNs } from '../../ui/src/vn';
 const { renderer, renderEmptyElement } = VxeUI;
 const renderType = 'header';
 function getColumnFirstChild(column) {
@@ -34,7 +36,7 @@ export default defineVxeComponent({
     setup(props) {
         const $xeTable = inject('$xeTable', {});
         const { xID, props: tableProps, reactData: tableReactData, internalData: tableInternalData } = $xeTable;
-        const { computeColumnOpts, computeColumnDragOpts, computeCellOpts, computeMouseOpts, computeHeaderCellOpts, computeDefaultRowHeight, computeVirtualXOpts } = $xeTable.getComputeMaps();
+        const { computeColumnOpts, computeColumnDragOpts, computeCellOpts, computeMouseOpts, computeHeaderCellOpts, computeDefaultRowHeight, computeVirtualXOpts, computeFloatingFilterOpts } = $xeTable.getComputeMaps();
         const headerColumn = ref([]);
         const refElem = ref();
         const refHeaderScroll = ref();
@@ -238,10 +240,114 @@ export default defineVxeComponent({
                 ]);
             });
         };
-        const renderHeads = (isGroup, isOptimizeMode, headerGroups) => {
+        const renderFilterRows = (isOptimizeMode, cols) => {
+            const $xeGrid = $xeTable.xeGrid;
+            const $xeGantt = $xeTable.xeGantt;
             const { fixedType } = props;
+            const { showHeaderOverflow: allColumnHeaderOverflow, headerAlign: allHeaderAlign, align: allAlign } = tableProps;
+            const { currentColumn, overflowX } = tableReactData;
+            const { fullColumnIdData } = tableInternalData;
+            const cellOpts = computeCellOpts.value;
+            const defaultRowHeight = computeDefaultRowHeight.value;
+            const headerCellOpts = computeHeaderCellOpts.value;
+            const currCellHeight = getCalcHeight(headerCellOpts.height) || defaultRowHeight;
+            return cols.map((column, $columnIndex) => {
+                const { type, showHeaderOverflow, headerAlign, align, filters, editRender, cellRender, floatingFilters, filterRender, slots } = column;
+                const colid = column.id;
+                const colRest = fullColumnIdData[colid] || {};
+                const renderOpts = editRender || cellRender;
+                const flSlot = slots ? (slots.floatingFilter || slots['floating-filter']) : null;
+                const compConf = renderOpts ? renderer.get(renderOpts.name) : null;
+                const flCompConf = isEnableConf(filterRender) ? renderer.get(filterRender.name) : null;
+                const rtFloatingFilter = flCompConf ? flCompConf.renderTableFloatingFilter : null;
+                const fixedHiddenColumn = overflowX && (fixedType ? column.fixed !== fixedType : !!column.fixed);
+                const isPadding = XEUtils.isBoolean(headerCellOpts.padding) ? headerCellOpts.padding : cellOpts.padding;
+                const headOverflow = XEUtils.eqNull(showHeaderOverflow) ? allColumnHeaderOverflow : showHeaderOverflow;
+                const headAlign = headerAlign || (compConf ? compConf.tableHeaderCellAlign : '') || allHeaderAlign || align || (compConf ? compConf.tableCellAlign : '') || allAlign;
+                const showEllipsis = headOverflow === 'ellipsis';
+                const showTitle = headOverflow === 'title';
+                const showTooltip = headOverflow === true || headOverflow === 'tooltip';
+                const hasEllipsis = showTitle || showTooltip || showEllipsis;
+                let hasFilter = false;
+                let firstFilterOption = null;
+                if (filters) {
+                    firstFilterOption = filters[0];
+                    hasFilter = filters.some((item) => item.checked);
+                }
+                const columnIndex = colRest.index;
+                const _columnIndex = colRest._index;
+                const cellParams = {
+                    $table: $xeTable,
+                    $grid: $xeGrid,
+                    $gantt: $xeGantt,
+                    column,
+                    columnIndex,
+                    $columnIndex,
+                    _columnIndex,
+                    option: firstFilterOption,
+                    fixed: fixedType,
+                    type: renderType,
+                    isHidden: fixedHiddenColumn,
+                    hasFilter
+                };
+                const thAttrs = {
+                    colid
+                };
+                const isLastColumn = $columnIndex === cols.length - 1;
+                const isAutoCellWidth = !column.resizeWidth && (column.minWidth === 'auto' || column.width === 'auto');
+                const tcStyle = {};
+                if (hasEllipsis) {
+                    tcStyle.height = `${currCellHeight}px`;
+                }
+                else {
+                    tcStyle.minHeight = `${currCellHeight}px`;
+                }
+                return h('th', Object.assign({ class: ['vxe-table--column vxe-header--column', colid, fixedHiddenColumn ? 'fixed--hidden' : 'fixed--visible', {
+                            [`col--${headAlign}`]: headAlign,
+                            [`col--${type}`]: type,
+                            'col--last': isLastColumn,
+                            'col--fixed': column.fixed,
+                            'col--ellipsis': hasEllipsis,
+                            'fixed--width': !isAutoCellWidth,
+                            'is--padding': isPadding,
+                            'is--sortable': column.sortable,
+                            'col--current': currentColumn === column
+                        }
+                    ], key: colid }, thAttrs), [
+                    h('div', {
+                        class: ['vxe-cell', {
+                                'c--title': showTitle,
+                                'c--tooltip': showTooltip,
+                                'c--ellipsis': showEllipsis
+                            }],
+                        style: tcStyle
+                    }, isOptimizeMode && fixedHiddenColumn && !floatingFilters
+                        ? []
+                        : [
+                            h('div', {
+                                colid,
+                                class: 'vxe-cell--wrapper vxe-header-cell--wrapper'
+                            }, flSlot
+                                ? $xeTable.callSlot(flSlot, cellParams)
+                                : (rtFloatingFilter && firstFilterOption
+                                    ? getSlotVNs(rtFloatingFilter(filterRender, {
+                                        $table: $xeTable,
+                                        option: firstFilterOption,
+                                        column: column,
+                                        columnIndex,
+                                        $columnIndex
+                                    }))
+                                    : []))
+                        ])
+                ]);
+            });
+        };
+        const renderHeads = (isGroup, isOptimizeMode, headerGroups) => {
+            const { fixedType, fixedColumn } = props;
             const { headerRowClassName, headerRowStyle } = tableProps;
-            return headerGroups.map((cols, $rowIndex) => {
+            const { visibleColumn } = tableInternalData;
+            const floatingFilterOpts = computeFloatingFilterOpts.value;
+            const rowVNs = headerGroups.map((cols, $rowIndex) => {
                 const params = { $table: $xeTable, $rowIndex, fixed: fixedType, type: renderType };
                 return h('tr', {
                     key: $rowIndex,
@@ -252,6 +358,15 @@ export default defineVxeComponent({
                     style: headerRowStyle ? (XEUtils.isFunction(headerRowStyle) ? headerRowStyle(params) : headerRowStyle) : null
                 }, renderRows(isGroup, isOptimizeMode, headerGroups, $rowIndex, cols));
             });
+            if (floatingFilterOpts.enabled) {
+                rowVNs.push(h('tr', {
+                    key: 'ff',
+                    class: [
+                        'vxe-header--row'
+                    ]
+                }, renderFilterRows(isOptimizeMode, isOptimizeMode && fixedType ? fixedColumn : visibleColumn)));
+            }
+            return rowVNs;
         };
         const renderVN = () => {
             const { fixedType, fixedColumn, tableColumn } = props;

package/es/table/src/props.js

@@ -235,6 +235,8 @@ export const tableProps = {
     sortConfig: Object,
     // 筛选配置项
     filterConfig: Object,
+    // 浮动筛选配置项
+    floatingFilterConfig: Object,
     // 单选框配置
     radioConfig: Object,
     // 复选框配置项

package/es/table/src/table.js

@@ -132,9 +132,7 @@ export default defineVxeComponent({
                 isAllSelected: false,
                 isIndeterminate: false,
                 style: null,
-                options: [],
                 column: null,
-                multiple: false,
                 visible: false,
                 maxHeight: null
             },
@@ -534,6 +532,9 @@ export default defineVxeComponent({
         const computeFilterOpts = computed(() => {
             return Object.assign({}, getConfig().table.filterConfig, props.filterConfig);
         });
+        const computeFloatingFilterOpts = computed(() => {
+            return Object.assign({}, getConfig().table.floatingFilterConfig, props.floatingFilterConfig);
+        });
         const computeMouseOpts = computed(() => {
             return Object.assign({}, getConfig().table.mouseConfig, props.mouseConfig);
         });
@@ -797,6 +798,7 @@ export default defineVxeComponent({
             computeEditOpts,
             computeSortOpts,
             computeFilterOpts,
+            computeFloatingFilterOpts,
             computeMouseOpts,
             computeAreaOpts,
             computeKeyboardOpts,
@@ -1654,7 +1656,7 @@ export default defineVxeComponent({
                 }
                 else {
                     if (storage && !type) {
-                        errLog('vxe.error.reqSupportProp', ['storage', `${column.getTitle() || type || ''} -> field=?`]);
+                        errLog('vxe.error.reqSupportProp', ['storage', `[${type ? `type=${type}` : `title=${column.getTitle()}`}]field=?`]);
                     }
                     if (columnOpts.drag && (isCrossDrag || isSelfToChildDrag)) {
                         errLog('vxe.error.reqSupportProp', ['column-drag-config.isCrossDrag | column-drag-config.isSelfToChildDrag', `${column.getTitle() || type || ''} -> field=?`]);
@@ -6197,7 +6199,7 @@ export default defineVxeComponent({
             setFilterByEvent(evnt, fieldOrColumn, options) {
                 const column = handleFieldOrColumn($xeTable, fieldOrColumn);
                 if (column && column.filters) {
-                    column.filters = toFilters(options || []);
+                    column.filters = toFilters(options || [], column.id);
                     return $xeTable.handleColumnConfirmFilter(column, evnt);
                 }
                 return nextTick();
@@ -6211,13 +6213,13 @@ export default defineVxeComponent({
                 const { column, visible } = filterStore;
                 filterStore.isAllSelected = false;
                 filterStore.isIndeterminate = false;
-                filterStore.options = [];
                 filterStore.visible = false;
                 if (visible) {
+                    const field = column ? column.field : null;
                     dispatchEvent('filter-visible', {
                         column,
-                        property: column.field,
-                        field: column.field,
+                        property: field,
+                        field,
                         filterList: () => $xeTable.getCheckedFilters(),
                         visible: false
                     }, null);
@@ -7280,7 +7282,7 @@ export default defineVxeComponent({
          * 全局按下事件处理
          */
         const handleGlobalMousedownEvent = (evnt) => {
-            const { editStore, ctxMenuStore, filterStore, customStore } = reactData;
+            const { editStore, ctxMenuStore, customStore } = reactData;
             const { mouseConfig, editRules } = props;
             const el = refElem.value;
             const editOpts = computeEditOpts.value;
@@ -7301,7 +7303,7 @@ export default defineVxeComponent({
                 }
                 else {
                     if (!getEventTargetNode(evnt, document.body, 'vxe-table--ignore-clear').flag) {
-                        tablePrivateMethods.preventEvent(evnt, 'event.clearFilter', filterStore.args, tableMethods.closeFilter);
+                        tablePrivateMethods.preventEvent(evnt, 'event.clearFilter', internalData._currFilterParams, tableMethods.closeFilter);
                     }
                 }
             }
@@ -8810,24 +8812,25 @@ export default defineVxeComponent({
                 reactData.reColumnFlag++;
             },
             handleFilterOptions(column) {
-                const { filterStore } = reactData;
-                const { filters, filterMultiple, filterRender } = column;
-                const compConf = isEnableConf(filterRender) ? renderer.get(filterRender.name) : null;
-                const frMethod = column.filterRecoverMethod || (compConf ? (compConf.tableFilterRecoverMethod || compConf.filterRecoverMethod) : null);
-                filterStore.multiple = filterMultiple;
-                filterStore.options = filters;
-                filterStore.column = column;
-                // 复原状态
-                filterStore.options.forEach((option) => {
-                    const { _checked, checked } = option;
-                    option._checked = checked;
-                    if (!checked && _checked !== checked) {
-                        if (frMethod) {
-                            frMethod({ option, column, $table: $xeTable });
+                if (column) {
+                    const { filterStore } = reactData;
+                    const { filterRender, filters } = column;
+                    const filterOptions = filters || [];
+                    const compConf = isEnableConf(filterRender) ? renderer.get(filterRender.name) : null;
+                    const frMethod = column.filterRecoverMethod || (compConf ? (compConf.tableFilterRecoverMethod || compConf.filterRecoverMethod) : null);
+                    filterStore.column = column;
+                    // 复原状态
+                    filterOptions.forEach((option) => {
+                        const { _checked, checked } = option;
+                        option._checked = checked;
+                        if (!checked && _checked !== checked) {
+                            if (frMethod) {
+                                frMethod({ option, column, $table: $xeTable });
+                            }
                         }
-                    }
-                });
-                $xeTable.checkFilterOptions();
+                    });
+                    $xeTable.checkFilterOptions();
+                }
             },
             preventEvent(evnt, type, args, next, end) {
                 let evntList = interceptor.get(type);
@@ -9820,8 +9823,8 @@ export default defineVxeComponent({
                         $xeTable.handleHeaderCellDragMousedownEvent(evnt, params);
                     }
                 }
-                if (!triggerDrag && mouseConfig && mouseOpts.area && $xeTable.handleHeaderCellAreaModownEvent) {
-                    $xeTable.handleHeaderCellAreaModownEvent(evnt, Object.assign({ cell, triggerSort, triggerFilter }, params));
+                if (!triggerDrag && mouseConfig && mouseOpts.area && $xeTable.handleHeaderCellAreaMouseDnEvent) {
+                    $xeTable.handleHeaderCellAreaMouseDnEvent(evnt, Object.assign({ cell, triggerSort, triggerFilter }, params));
                 }
                 $xeTable.focus();
                 if ($xeTable.closeMenu) {

package/es/table/src/util.js

@@ -367,11 +367,14 @@ function getElementMarginAndWidth(elem) {
     }
     return 0;
 }
-export function toFilters(filters) {
-    if (filters && XEUtils.isArray(filters)) {
-        return filters.map(({ label, value, data, resetValue, checked }) => {
-            return { label, value, data, resetValue, checked: !!checked, _checked: !!checked };
-        });
+export function toFilters(filters, colid) {
+    if (filters) {
+        if (XEUtils.isArray(filters)) {
+            return filters.map(({ label, value, data, resetValue, checked }) => {
+                return { label, value, data, resetValue, checked: !!checked, _checked: !!checked, _colId: colid };
+            });
+        }
+        return [];
     }
     return filters;
 }

package/es/table/style.css

@@ -1525,7 +1525,8 @@
   box-shadow: var(--vxe-ui-base-popup-box-shadow);
   z-index: 10;
 }
-.vxe-table--filter-wrapper:not(.is--multiple) {
+.vxe-table--filter-wrapper:not(.is--multiple) .vxe-table--filter-header,
+.vxe-table--filter-wrapper:not(.is--multiple) .vxe-table--filter-body {
   text-align: center;
 }
 .vxe-table--filter-wrapper.is--active {