releases 4.7.55

x-extends · Jul 18, 2024 · e60b661 · e60b661
1 parent dbbc904
commit e60b661
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 31 deletions.
diff --git 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
@@ -9,14 +9,51 @@ 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) {
     const { props, reactData, internalData } = $xeTable
     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
@@ -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
@@ -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'