diff --git a/package.json b/package.json index 785f8b9b5f..d18e763541 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vxe-table", - "version": "4.7.54", + "version": "4.7.55", "description": "一个基于 vue 的 PC 端表格组件,支持增删改查、虚拟树、列拖拽,懒加载、快捷菜单、数据校验、树形结构、打印、导入导出、自定义模板、渲染器、JSON 配置式...", "scripts": { "update": "npm install --legacy-peer-deps", @@ -28,7 +28,7 @@ "style": "lib/style.css", "typings": "types/index.d.ts", "dependencies": { - "vxe-pc-ui": "^4.0.73" + "vxe-pc-ui": "^4.0.76" }, "devDependencies": { "@types/resize-observer-browser": "^0.1.11", diff --git a/packages/table/module/filter/hook.ts b/packages/table/module/filter/hook.ts index bda4de6b1e..e8c23548f0 100644 --- a/packages/table/module/filter/hook.ts +++ b/packages/table/module/filter/hook.ts @@ -9,7 +9,7 @@ import type { TableFilterMethods, TableFilterPrivateMethods } from '../../../../ const { renderer, hooks } = VxeUI -const tableFilterMethodKeys: (keyof TableFilterMethods)[] = ['setFilter', 'clearFilter', 'getCheckedFilters'] +const tableFilterMethodKeys: (keyof TableFilterMethods)[] = ['openFilter', 'setFilter', 'clearFilter', 'getCheckedFilters', 'updateFilterOptionStatus'] hooks.add('tableFilterModule', { setupTable ($xeTable) { @@ -17,6 +17,43 @@ hooks.add('tableFilterModule', { const { refTableHeader, refTableBody, refTableFilter } = $xeTable.getRefMaps() const { computeFilterOpts, computeMouseOpts } = $xeTable.getComputeMaps() + // 确认筛选 + const confirmFilter = (evnt: Event) => { + const { filterStore } = reactData + filterStore.options.forEach((option: any) => { + option.checked = option._checked + }) + $xeTable.confirmFilterEvent(evnt) + } + + // (单选)筛选发生改变 + const changeRadioOption = (evnt: Event, checked: boolean, item: any) => { + const { filterStore } = reactData + filterStore.options.forEach((option: any) => { + option._checked = false + }) + item._checked = checked + $xeTable.checkFilterOptions() + confirmFilter(evnt) + } + + // (多选)筛选发生改变 + const changeMultipleOption = (evnt: Event, checked: boolean, item: any) => { + item._checked = checked + $xeTable.checkFilterOptions() + } + + /** + * 重置筛选 + * 当筛选面板中的重置按钮被按下时触发 + * @param {Event} evnt 事件 + */ + const resetFilter = (evnt: Event) => { + const { filterStore } = reactData + $xeTable.handleClearFilter(filterStore.column) + $xeTable.confirmFilterEvent(evnt) + } + const filterPrivateMethods: TableFilterPrivateMethods = { checkFilterOptions () { const { filterStore } = reactData @@ -187,7 +224,20 @@ hooks.add('tableFilterModule', { // 存在滚动行为未结束情况 setTimeout(() => $xeTable.recalculate(), 50) }) - } + }, + handleFilterChangeRadioOption: changeRadioOption, + handleFilterChangeMultipleOption: changeMultipleOption, + // 筛选发生改变 + handleFilterChangeOption (evnt: Event, checked: boolean, item: any) { + const { filterStore } = reactData + if (filterStore.multiple) { + changeMultipleOption(evnt, checked, item) + } else { + changeRadioOption(evnt, checked, item) + } + }, + handleFilterConfirmFilter: confirmFilter, + handleFilterResetFilter: resetFilter } const filterMethods: TableFilterMethods = { @@ -277,6 +327,11 @@ hooks.add('tableFilterModule', { } }) return filterList + }, + updateFilterOptionStatus (item: any, checked: boolean) { + item._checked = checked + item.checked = checked + return nextTick() } } diff --git a/packages/table/module/filter/panel.ts b/packages/table/module/filter/panel.ts index 2bcd61ae02..41eb62ed05 100644 --- a/packages/table/module/filter/panel.ts +++ b/packages/table/module/filter/panel.ts @@ -39,22 +39,12 @@ export default defineComponent({ *************************/ // 确认筛选 const confirmFilter = (evnt: Event) => { - const { filterStore } = props - filterStore.options.forEach((option: any) => { - option.checked = option._checked - }) - $xeTable.confirmFilterEvent(evnt) + $xeTable.handleFilterConfirmFilter(evnt) } // (单选)筛选发生改变 const changeRadioOption = (evnt: Event, checked: boolean, item: any) => { - const { filterStore } = props - filterStore.options.forEach((option: any) => { - option._checked = false - }) - item._checked = checked - $xeTable.checkFilterOptions() - confirmFilter(evnt) + $xeTable.handleFilterChangeRadioOption(evnt, checked, item) } /** @@ -63,25 +53,17 @@ export default defineComponent({ * @param {Event} evnt 事件 */ const resetFilter = (evnt: Event) => { - const { filterStore } = props - $xeTable.handleClearFilter(filterStore.column) - $xeTable.confirmFilterEvent(evnt) + $xeTable.handleFilterResetFilter(evnt) } // (多选)筛选发生改变 const changeMultipleOption = (evnt: Event, checked: boolean, item: any) => { - item._checked = checked - $xeTable.checkFilterOptions() + $xeTable.handleFilterChangeMultipleOption(evnt, checked, item) } // 筛选发生改变 const changeOption = (evnt: Event, checked: boolean, item: any) => { - const { filterStore } = props - if (filterStore.multiple) { - changeMultipleOption(evnt, checked, item) - } else { - changeRadioOption(evnt, checked, item) - } + $xeTable.handleFilterChangeOption(evnt, checked, item) } const changeAllOption = (evnt: Event, checked: boolean) => { diff --git a/packages/table/render/index.ts b/packages/table/render/index.ts index 2b8e014779..4661801bc9 100644 --- a/packages/table/render/index.ts +++ b/packages/table/render/index.ts @@ -441,6 +441,13 @@ function handleFilterMethod ({ option, row, column }: any) { return cellValue == data } +function handleInputFilterMethod ({ option, row, column }: any) { + const { data } = option + const cellValue = XEUtils.get(row, column.property) + /* eslint-disable eqeqeq */ + return XEUtils.toValueString(cellValue).indexOf(data) > -1 +} + function nativeSelectEditRender (renderOpts: any, params: any) { return [ h('select', { @@ -561,7 +568,7 @@ renderer.mixin({ renderEdit: nativeEditRender, renderDefault: nativeEditRender, renderFilter: nativeFilterRender, - defaultFilterMethod: handleFilterMethod + defaultFilterMethod: handleInputFilterMethod }, textarea: { autofocus: 'textarea', @@ -614,7 +621,7 @@ renderer.mixin({ }, renderDefault: defaultEditRender, renderFilter: defaultFilterRender, - defaultFilterMethod: handleFilterMethod + defaultFilterMethod: handleInputFilterMethod }, VxeNumberInput: { autofocus: '.vxe-number-input--inner', @@ -635,7 +642,7 @@ renderer.mixin({ }, renderDefault: defaultEditRender, renderFilter: defaultFilterRender, - defaultFilterMethod: handleFilterMethod + defaultFilterMethod: handleInputFilterMethod }, VxeDatePicker: { autofocus: '.vxe-date-picker--inner', @@ -750,7 +757,7 @@ renderer.mixin({ }, renderDefault: oldEditRender, renderFilter: oldFilterRender, - defaultFilterMethod: handleFilterMethod + defaultFilterMethod: handleInputFilterMethod }, $textarea: { autofocus: '.vxe-textarea--inner'