vxe-table 4.16.20 → 4.17.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxe-table",
-  "version": "4.16.20",
+  "version": "4.17.0-beta.1",
   "description": "A PC-end table component based on Vxe UI, supporting copy-paste, data pivot table, and high-performance virtual list table solution.",
   "scripts": {
     "update": "npm install --legacy-peer-deps",

package/packages/grid/src/grid.ts

@@ -1385,6 +1385,10 @@ export default defineVxeComponent({
           $pager.endPageByEvent(evnt)
         }
       },
+      getCurrentPage () {
+        const { tablePage } = reactData
+        return tablePage.currentPage
+      },
       setCurrentPage (currentPage) {
         const { tablePage } = reactData
         const pageCount = computePageCount.value
@@ -1397,6 +1401,10 @@ export default defineVxeComponent({
           $pager.setCurrentPageByEvent(evnt, currentPage)
         }
       },
+      getPageSize () {
+        const { tablePage } = reactData
+        return tablePage.pageSize
+      },
       setPageSize (pageSize) {
         const { tablePage } = reactData
         tablePage.pageSize = Math.max(1, XEUtils.toNumber(pageSize))

package/packages/table/module/filter/hook.ts

@@ -9,7 +9,7 @@ import type { TableFilterMethods, TableFilterPrivateMethods, VxeTableDefines } f
 
 const { renderer, hooks } = VxeUI
 
-const tableFilterMethodKeys: (keyof TableFilterMethods)[] = ['openFilter', 'setFilter', 'clearFilter', 'saveFilterPanel', 'saveFilterPanelByEvent', 'resetFilterPanel', 'resetFilterPanelByEvent', 'getCheckedFilters', 'updateFilterOptionStatus']
+const tableFilterMethodKeys: (keyof TableFilterMethods)[] = ['openFilter', 'setFilter', 'clearFilter', 'saveFilter', 'saveFilterByEvent', 'saveFilterPanel', 'saveFilterPanelByEvent', 'resetFilter', 'resetFilterByEvent', 'resetFilterPanel', 'resetFilterPanelByEvent', 'getCheckedFilters', 'updateFilterOptionStatus']
 
 hooks.add('tableFilterModule', {
   setupTable ($xeTable) {
@@ -21,51 +21,15 @@ hooks.add('tableFilterModule', {
     const { refElem, refTableFilter } = $xeTable.getRefMaps()
     const { computeFilterOpts, computeMouseOpts } = $xeTable.getComputeMaps()
 
-    // 确认筛选
-    const handleFilterConfirmFilter = (evnt: Event | null) => {
-      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()
-      handleFilterConfirmFilter(evnt)
-    }
-
-    // （多选）筛选发生改变
-    const changeMultipleOption = (evnt: Event, checked: boolean, item: any) => {
-      item._checked = checked
-      $xeTable.checkFilterOptions()
-    }
-
-    /**
-     * 重置筛选
-     * 当筛选面板中的重置按钮被按下时触发
-     * @param {Event} evnt 事件
-     */
-    const handleFilterResetFilter = (evnt: Event | null) => {
-      const { filterStore } = reactData
-      $xeTable.handleClearFilter(filterStore.column)
-      $xeTable.confirmFilterEvent(evnt)
-      if (evnt) {
-        $xeTable.dispatchEvent('clear-filter', { filterList: [] }, evnt)
-      }
-    }
-
     const filterPrivateMethods: TableFilterPrivateMethods = {
       checkFilterOptions () {
         const { filterStore } = reactData
-        filterStore.isAllSelected = filterStore.options.every((item: any) => item._checked)
-        filterStore.isIndeterminate = !filterStore.isAllSelected && filterStore.options.some((item: any) => item._checked)
+        const { column } = filterStore
+        if (column) {
+          const filterOptions = (column.filters || []) as VxeTableDefines.FilterOption[]
+          filterStore.isAllSelected = filterOptions.every((item) => item._checked)
+          filterStore.isIndeterminate = !filterStore.isAllSelected && filterOptions.some((item) => item._checked)
+        }
       },
       /**
        * 点击筛选事件
@@ -177,10 +141,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: any[] = []
         const datas: any[] = []
-        column.filters.forEach((item: any) => {
+        filterOptions.forEach((item) => {
           if (item.checked) {
             values.push(item.value)
             datas.push(item.data)
@@ -222,26 +187,74 @@ hooks.add('tableFilterModule', {
       /**
        * 确认筛选
        * 当筛选面板中的确定按钮被按下时触发
-       * @param {Event} evnt 事件
        */
-      confirmFilterEvent (evnt: Event) {
+      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 || []) as VxeTableDefines.FilterOption[]
+          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: Event, checked: boolean, item: any) {
+      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,
-      handleFilterResetFilter
+      // 确认筛选
+      handleFilterConfirmFilter (evnt, column) {
+        if (column) {
+          const filterOptions = (column.filters || []) as VxeTableDefines.FilterOption[]
+          filterOptions.forEach((option) => {
+            option.checked = option._checked
+          })
+          $xeTable.confirmFilterEvent(evnt, column)
+        }
+      },
+      /**
+       * 重置筛选
+       * 当筛选面板中的重置按钮被按下时触发
+       */
+      handleFilterResetFilter (evnt: Event, column) {
+        if (column) {
+          $xeTable.handleClearFilter(column)
+          $xeTable.confirmFilterEvent(evnt, column)
+          if (evnt) {
+            $xeTable.dispatchEvent('clear-filter', { filterList: [] }, evnt)
+          }
+        }
+      }
     }
 
     const filterMethods: TableFilterMethods = {
@@ -273,7 +286,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)
           } else {
@@ -318,31 +331,64 @@ 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 () {
         const { tableFullColumn } = internalData
-        const filterList: any[] = []
+        const filterList: VxeTableDefines.FilterCheckedParams[] = []
         tableFullColumn.forEach((column) => {
           const { field, filters } = column
+          const filterOptions = filters || []
           const valueList: any[] = []
           const dataList: any[] = []
-          if (filters && filters.length) {
-            filters.forEach((item) => {
+          if (filterOptions) {
+            filterOptions.forEach((item) => {
               if (item.checked) {
                 valueList.push(item.value)
                 dataList.push(item.data)

package/packages/table/module/filter/panel.ts

@@ -1,4 +1,4 @@
-import { h, ref, computed, inject, Teleport } from 'vue'
+import { h, ref, computed, inject, Teleport, PropType } from 'vue'
 import { defineVxeComponent } from '../../../ui/src/comp'
 import { VxeUI } from '../../../ui'
 import { formatText, isEnableConf } from '../../../ui/src/utils'
@@ -7,14 +7,25 @@ import { getSlotVNs } from '../../../ui/src/vn'
 import { warnLog } from '../../../ui/src/log'
 import XEUtils from 'xe-utils'
 
-import type { VxeTableConstructor, VxeTableMethods, VxeTablePrivateMethods } from '../../../../types'
+import type { VxeGlobalRendererOptions } from 'vxe-pc-ui'
+import type { VxeTableConstructor, VxeTableMethods, VxeTablePrivateMethods, VxeColumnPropTypes, VxeTableDefines } from '../../../../types'
 
-const { getI18n, getIcon, renderer } = VxeUI
+const { getI18n, getIcon, renderer, renderEmptyElement } = VxeUI
 
 export default defineVxeComponent({
   name: 'VxeTableFilterPanel',
   props: {
-    filterStore: Object as any
+    filterStore: {
+      type: Object as PropType<{
+        isAllSelected: boolean
+        isIndeterminate: boolean
+        style: any
+        column: VxeTableDefines.ColumnInfo | null | undefined
+        visible: boolean
+        maxHeight: number | string | null
+      }>,
+      default: () => ({})
+    }
   },
   setup (props, context) {
     const xID = XEUtils.uniqueId()
@@ -38,16 +49,20 @@ export default defineVxeComponent({
 
     const computeHasCheckOption = computed(() => {
       const { filterStore } = props
-      return filterStore && filterStore.options.some((option: any) => option.checked)
+      const { column } = filterStore
+      return column && column.filters && column.filters.some((option) => option.checked)
     })
 
     // 全部筛选事件
     const filterCheckAllEvent = (evnt: Event, value: any) => {
       const { filterStore } = props
-      filterStore.options.forEach((option: any) => {
-        option._checked = value
-        option.checked = value
-      })
+      const { column } = filterStore
+      if (column && column.filters) {
+        column.filters.forEach((option: any) => {
+          option._checked = value
+          option.checked = value
+        })
+      }
       filterStore.isAllSelected = value
       filterStore.isIndeterminate = false
     }
@@ -57,10 +72,11 @@ export default defineVxeComponent({
      *************************/
     // 确认筛选
     const confirmFilter = (evnt: Event) => {
+      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)
     }
 
     // （单选）筛选发生改变
@@ -74,7 +90,8 @@ export default defineVxeComponent({
      * @param {Event} evnt 事件
      */
     const resetFilter = (evnt: Event) => {
-      $xeTable.handleFilterResetFilter(evnt)
+      const { filterStore } = props
+      $xeTable.handleFilterResetFilter(evnt, filterStore.column || null)
     }
 
     // （多选）筛选发生改变
@@ -89,7 +106,8 @@ export default defineVxeComponent({
 
     const changeAllOption = (evnt: Event, checked: boolean) => {
       const { filterStore } = props
-      if (filterStore.multiple) {
+      const { column } = filterStore
+      if (column && column.filterMultiple) {
         filterCheckAllEvent(evnt, checked)
       } else {
         resetFilter(evnt)
@@ -109,12 +127,16 @@ export default defineVxeComponent({
     }
     Object.assign($xeFilterPanel, filterPanelMethods)
 
-    const renderOptions = (filterRender: any, compConf: any) => {
+    const renderOptions = (filterRender: VxeColumnPropTypes.FilterRender | null, compConf: VxeGlobalRendererOptions | null) => {
       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 || []) as VxeTableDefines.FilterOption[]
       const filterSlot = slots ? slots.filter : null
-      const params = Object.assign({}, tableInternalData._currFilterParams, { $panel: $xeFilterPanel, $table: $xeTable })
+      const params = Object.assign({}, tableInternalData._currFilterParams, { option: filterOptions[0], $panel: $xeFilterPanel, $table: $xeTable })
       const rtFilter = compConf ? (compConf.renderTableFilter || compConf.renderFilter) : null
       if (filterSlot) {
         return [
@@ -127,7 +149,7 @@ export default defineVxeComponent({
               : {}
           }, $xeTable.callSlot(filterSlot, params))
         ]
-      } else if (rtFilter) {
+      } else if (filterRender && rtFilter) {
         return [
           h('div', {
             class: 'vxe-table--filter-template',
@@ -139,8 +161,8 @@ export default defineVxeComponent({
           }, getSlotVNs(rtFilter(filterRender, params)))
         ]
       }
-      const isAllChecked = multiple ? filterStore.isAllSelected : !filterStore.options.some((item: any) => 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'
@@ -150,11 +172,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: MouseEvent) => {
               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)]
@@ -173,7 +195,7 @@ export default defineVxeComponent({
                 maxHeight: toCssUnit(maxHeight)
               }
             : {}
-        }, filterStore.options.map((item: any) => {
+        }, filterOptions.map((item: any) => {
           const isChecked = item._checked
           const isIndeterminate = false
           return h('li', {
@@ -184,7 +206,7 @@ export default defineVxeComponent({
             onClick: (evnt: MouseEvent) => {
               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)]
@@ -201,13 +223,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'
@@ -230,9 +255,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
@@ -254,7 +282,7 @@ export default defineVxeComponent({
             {
               [`size--${vSize}`]: vSize,
               'is--animat': tableProps.animat,
-              'is--multiple': multiple,
+              'is--multiple': column.filterMultiple,
               'is--active': visible
             }
           ],