更新 d.ts、修复宽度与高度设置无效问题

examples/api/table.ts

@@ -1982,9 +1982,18 @@ const apis = [
           },
           {
             name: 'beforeFindMethod',
-            desc: '自定义单元格替换之前的方法，可以通过返回 false 阻止替换行为',
+            desc: '自定义单元格查找之前的方法，可以通过返回 false 阻止查找行为',
             version: 'pro',
-            type: '({ findValue }) => boolean',
+            type: '({ isAll, findValue }) => boolean',
+            enum: '',
+            defVal: '',
+            list: []
+          },
+          {
+            name: 'afterFindMethod',
+            desc: '自定义单元格查找之后的方法',
+            version: 'pro',
+            type: '({ isAll, findValue, result }) => void',
             enum: '',
             defVal: '',
             list: []
@@ -2011,7 +2020,16 @@ const apis = [
             name: 'beforeReplaceMethod',
             desc: '自定义单元格替换之前的方法，可以通过返回 false 阻止替换行为',
             version: 'pro',
-            type: '({ findValue, replaceValue }) => boolean',
+            type: '({ isAll, findValue, replaceValue }) => boolean',
+            enum: '',
+            defVal: '',
+            list: []
+          },
+          {
+            name: 'afterReplaceMethod',
+            desc: '自定义单元格替换之后的方法',
+            version: 'pro',
+            type: '({ isAll, findValue, replaceValue, result }) => void',
             enum: '',
             defVal: '',
             list: []
@@ -3147,7 +3165,7 @@ const apis = [
       },
       {
         name: 'open-fnr',
-        desc: '只对 keyboard-config.isFNR 配置时有效，在查询与搜索弹框被打开时会触发该事件',
+        desc: '只对 keyboard-config.isFNR 配置时有效，在查找与替换弹框被打开时会触发该事件',
         version: 'pro',
         type: '',
         enum: '',
@@ -3156,13 +3174,49 @@ const apis = [
       },
       {
         name: 'fnr-change',
-        desc: '只对 keyboard-config.isFNR 配置时有效，在查询与搜索弹框的 Tab 页被切换时会触发该事件',
+        desc: '只对 keyboard-config.isFNR 配置时有效，在查找与替换弹框的 Tab 页被切换时会触发该事件',
         version: 'pro',
         type: '',
         enum: '',
         defVal: '{ tab, $event}',
         list: []
       },
+      {
+        name: 'fnr-find',
+        desc: '只对 keyboard-config.isFNR 配置时有效，在点击查找时会触发该事件',
+        version: 'pro',
+        type: '',
+        enum: '',
+        defVal: '{ findValue, row, column, $event}',
+        list: []
+      },
+      {
+        name: 'fnr-find-all',
+        desc: '只对 keyboard-config.isFNR 配置时有效，在点击查找所有时会触发该事件',
+        version: 'pro',
+        type: '',
+        enum: '',
+        defVal: '{ findValue, result, $event}',
+        list: []
+      },
+      {
+        name: 'fnr-replace',
+        desc: '只对 keyboard-config.isFNR 配置时有效，在点击替换时会触发该事件',
+        version: 'pro',
+        type: '',
+        enum: '',
+        defVal: '{ findValue, replaceValue, row, column, $event}',
+        list: []
+      },
+      {
+        name: 'fnr-replace-all',
+        desc: '只对 keyboard-config.isFNR 配置时有效，在点击替换所有时会触发该事件',
+        version: 'pro',
+        type: '',
+        enum: '',
+        defVal: '{ findValue, replaceValue, result, $event}',
+        list: []
+      },
       {
         name: 'cell-area-copy',
         desc: '只对 keyboard-config.isClip 配置时有效，在单元格被复制时会触发该事件',

examples/views/api/API.vue

@@ -260,7 +260,7 @@ export default defineComponent({
           } else if (row.abandoned) {
             return '该参数属于评估阶段，谨慎使用，后续有可能会被废弃的风险'
           } else if (row.version === 'pro') {
-            return '该参数属于 PRO 扩展插件的功能，需获取授权，如有需要可联系邮件：xu_liangzhan@163.com'
+            return '该参数属于 PRO 扩展插件的功能'
           }
         }
       }

examples/views/table/base/Filter.vue

@@ -13,9 +13,10 @@
     <vxe-table
       border
       highlight-hover-row
+      ref="xTable1"
       :data="demo1.tableData">
       <vxe-column field="id" title="ID"></vxe-column>
-      <vxe-column field="name" title="Name" sortable :filters="[{label: 'id大于10002', value: 10002}, {label: 'id大于10003', value: 10003}]" :filter-method="filterNameMethod"></vxe-column>
+      <vxe-column field="name" title="Name" sortable :filters="[]" :filter-method="filterNameMethod"></vxe-column>
       <vxe-column field="sex" title="Sex" sortable :filters="[{label: 'Man', value: '1'}, {label: 'Woman', value: '0'}]" :filter-multiple="false"></vxe-column>
       <vxe-column field="age" title="Age" :filters="[{ data: '' }]" :filter-method="filterAgeMethod">
         <template #filter="{ $panel, column }">
@@ -65,11 +66,13 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive } from 'vue'
-import { VxeColumnPropTypes } from '../../../../types/index'
+import { defineComponent, ref, reactive, nextTick } from 'vue'
+import { VxeTableInstance, VxeColumnPropTypes } from '../../../../types/index'
 
 export default defineComponent({
   setup () {
+    const xTable1 = ref({} as VxeTableInstance)
+
     const demo1 = reactive({
       tableData: [
         { id: 10001, name: 'Test1', role: 'Develop', sex: '0', age: 28, address: 'vxe-table 从入门到放弃' },
@@ -81,6 +84,22 @@ export default defineComponent({
       ]
     })
 
+    nextTick(() => {
+      // 异步加载筛选数据
+      setTimeout(() => {
+        const $table = xTable1.value
+        if ($table) {
+          const nameColumn = $table.getColumnByField('name')
+          if (nameColumn) {
+            $table.setFilter(nameColumn, [
+              { label: 'id大于10002', value: 10002 },
+              { label: 'id大于10003', value: 10003 }
+            ])
+          }
+        }
+      }, 500)
+    })
+
     const demo2 = reactive({
       tableData: [
         { id: 10001, name: 'Test1', role: 'Develop', sex: '0', age: 28, address: 'vxe-table 从入门到放弃' },
@@ -101,6 +120,7 @@ export default defineComponent({
     }
 
     return {
+      xTable1,
       demo1,
       demo2,
       filterNameMethod,
@@ -110,9 +130,10 @@ export default defineComponent({
         <vxe-table
           border
           highlight-hover-row
+          ref="xTable1"
           :data="demo1.tableData">
           <vxe-column field="id" title="ID"></vxe-column>
-          <vxe-column field="name" title="Name" sortable :filters="[{label: 'id大于10002', value: 10002}, {label: 'id大于10003', value: 10003}]" :filter-method="filterNameMethod"></vxe-column>
+          <vxe-column field="name" title="Name" sortable :filters="[]" :filter-method="filterNameMethod"></vxe-column>
           <vxe-column field="sex" title="Sex" sortable :filters="[{label: 'Man', value: '1'}, {label: 'Woman', value: '0'}]" :filter-multiple="false"></vxe-column>
           <vxe-column field="age" title="Age" :filters="[{ data: '' }]" :filter-method="filterAgeMethod">
             <template #filter="{ $panel, column }">
@@ -124,28 +145,41 @@ export default defineComponent({
         `,
         `
         import { defineComponent, reactive } from 'vue'
-        import { VxeColumnPropTypes } from '../../../../types/index'
+        import { VxeTableInstance } from '../../../../types/index'
 
         export default defineComponent({
           setup () {
+            const xTable1 = ref({} as VxeTableInstance)
+
             const demo1 = reactive({
               tableData: [
                 { id: 10001, name: 'Test1', role: 'Develop', sex: '0', age: 28, address: 'vxe-table 从入门到放弃' },
                 { id: 10002, name: 'Test2', role: 'Test', sex: '1', age: 22, address: 'Guangzhou' },
                 { id: 10003, name: 'Test3', role: 'PM', sex: '0', age: 32, address: 'Shanghai' },
-                { id: 10004, name: 'Test4', role: 'Designer', sex: '1', age: 24, address: 'Shanghai' }
+                { id: 10004, name: 'Test4', role: 'Designer', sex: '1', age: 24, address: 'Shanghai' },
+                { id: 10005, name: 'Test5', role: 'Develop', sex: '0', age: 32, address: 'Shenzhen' },
+                { id: 10006, name: 'Test6', role: 'Designer', sex: '0', age: 28, address: 'Shanghai' }
               ]
             })
 
-            const filterNameMethod: VxeColumnPropTypes.FilterMethod = ({ value, row }) => {
-              return row.id >= value
-            }
-
-            const filterAgeMethod: VxeColumnPropTypes.FilterMethod = ({ option, row }) => {
-              return row.age === Number(option.data)
-            }
+            nextTick(() => {
+              // 异步加载筛选数据
+              setTimeout(() => {
+                const $table = xTable1.value
+                if ($table) {
+                  const nameColumn = $table.getColumnByField('name')
+                  if (nameColumn) {
+                    $table.setFilter(nameColumn, [
+                      { label: 'id大于10002', value: 10002 },
+                      { label: 'id大于10003', value: 10003 }
+                    ])
+                  }
+                }
+              }, 500)
+            })
 
             return {
+              xTable1,
               demo1,
               filterNameMethod,
               filterAgeMethod

examples/views/table/other/SortableRow.vue

@@ -41,7 +41,6 @@
 
     <p class="tip">
       例如 <table-api-link name="vxe-grid"/> 简单示例：<br>
-      由于树节点的深层结构，所以需要在树节点在变动之后调用 <table-api-link prop="syncData"/> 方法刷新数据<br>
       <span class="red">（注：该示例仅供参考，具体请自行实现）</span>
     </p>
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxe-table",
-  "version": "4.0.23",
+  "version": "4.0.24",
   "description": "一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、虚拟列表、弹窗、自定义模板、渲染器、贼灵活的配置项、扩展接口等...",
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -88,7 +88,7 @@
     "vxe-table-plugin-shortcut-key": "^3.0.1",
     "xe-ajax": "^4.0.5",
     "xe-clipboard": "^1.10.1",
-    "xe-utils": "^3.3.0",
+    "xe-utils": "^3.3.1",
     "xlsx": "^0.16.9"
   },
   "peerDependencies": {

packages/list/src/list.ts

@@ -4,7 +4,6 @@ import GlobalConfig from '../../v-x-e-table/src/conf'
 import { useSize } from '../../hooks/size'
 import { createResizeEvent, XEResizeObserver } from '../../tools/resize'
 import { browse } from '../../tools/dom'
-import { isNumVal } from '../../tools/utils'
 import { GlobalEvent } from '../../tools/event'
 
 import { VxeListConstructor, VxeListPropTypes, VxeListEmits, ListReactData, ListInternalData, ListMethods, ListPrivateRef, VxeListMethods } from '../../../types/all'
@@ -81,10 +80,10 @@ export default defineComponent({
       const { height, maxHeight } = props
       const style: { [key: string]: string | number } = {}
       if (height) {
-        style.height = isNumVal(height) ? `${height}px` : height
+        style.height = `${isNaN(height as number) ? height : `${height}px`}`
       } else if (maxHeight) {
         style.height = 'auto'
-        style.maxHeight = isNumVal(maxHeight) ? `${maxHeight}px` : maxHeight
+        style.maxHeight = `${isNaN(maxHeight as number) ? maxHeight : `${maxHeight}px`}`
       }
       return style
     })

packages/modal/src/modal.ts

@@ -2,7 +2,7 @@ import { defineComponent, h, Teleport, ref, Ref, computed, reactive, nextTick, w
 import XEUtils from 'xe-utils'
 import { useSize } from '../../hooks/size'
 import { getDomNode, getEventTargetNode } from '../../tools/dom'
-import { errLog, getLastZIndex, nextZIndex, isNumVal, getFuncText } from '../../tools/utils'
+import { errLog, getLastZIndex, nextZIndex, getFuncText } from '../../tools/utils'
 import { GlobalEvent, hasEventKey, EVENT_KEYS } from '../../tools/event'
 import GlobalConfig from '../../v-x-e-table/src/conf'
 import VxeButtonConstructor from '../../button/src/button'
@@ -117,8 +117,8 @@ export default defineComponent({
     const recalculate = () => {
       const { width, height } = props
       const boxElem = getBox()
-      boxElem.style.width = width ? (isNumVal(width) ? `${width}px` : width) : ''
-      boxElem.style.height = height ? (isNumVal(height) ? `${height}px` : height) : ''
+      boxElem.style.width = `${width ? (isNaN(width as number) ? width : `${width}px`) : ''}`
+      boxElem.style.height = `${height ? (isNaN(height as number) ? height : `${height}px`) : ''}`
       return nextTick()
     }
 

packages/table/src/emits.ts

@@ -44,6 +44,10 @@ export default [
 
   'open-fnr',
   'fnr-change',
+  'fnr-find',
+  'fnr-find-all',
+  'fnr-replace',
+  'fnr-replace-all',
   'cell-area-copy',
   'cell-area-cut',
   'cell-area-paste',

packages/tools/utils.ts

@@ -44,10 +44,6 @@ export function getLastZIndex () {
 export const warnLog = outLog('warn')
 export const errLog = outLog('error')
 
-export function isNumVal (num: string | number): num is number {
-  return !isNaN(parseFloat('' + num))
-}
-
 export function hasChildrenList (item: any) {
   return item && item.children && item.children.length > 0
 }

styles/table.scss

@@ -1017,7 +1017,7 @@
     display: none;
     position: absolute;
     top: 0;
-    z-index: 3;
+    z-index: 5;
   }
   .vxe-table--empty-content {
     display: block;

types/plugins/pro.d.ts

@@ -58,7 +58,7 @@ export interface VxeTableProMethods {
    */
   openReplace(): Promise<any>;
 }
-export interface VxeProPluginMethods extends VxeTableProMethods {}
+export interface VxeProPluginMethods extends VxeTableProMethods { }
 
 export interface VxeTableProPrivateMethods {
   handleKeyboardEvent(evnt: KeyboardEvent): void;
@@ -74,7 +74,7 @@ export interface VxeTableProPrivateMethods {
   triggerPasteCellAreaEvent(evnt: MouseEvent): void;
   triggerFNROpenEvent(evnt: MouseEvent, tab: 'find' | 'replace'): void;
 }
-export interface VxeProPluginPrivateMethods extends VxeTableProPrivateMethods {}
+export interface VxeProPluginPrivateMethods extends VxeTableProPrivateMethods { }
 
 declare module '../table' {
   interface VxeTableMethods extends VxeTableProMethods { }
@@ -103,7 +103,7 @@ export namespace VxeTableProDefines {
     value: string;
     label: string;
   }
-  
+
   export interface FNRSearch {
     seq: number;
     row: number;
@@ -123,7 +123,7 @@ export namespace VxeTableProDefines {
     width: number;
     height: number;
   }
-  
+
   export interface MouseCellArea {
     el?: HTMLElement | null;
     leftEl?: HTMLElement | null;
@@ -138,7 +138,7 @@ export namespace VxeTableProDefines {
   }
 
   export type CELL_AREA_TYPE = 'main' | 'copy' | 'extend' | 'multi' | 'active'
-  
+
   export interface CellAreaConfig {
     type?: CELL_AREA_TYPE;
     startColumn: VxeTableDefines.ColumnInfo | number;
@@ -179,9 +179,44 @@ export namespace VxeTableProDefines {
   }
   export interface OpenFnrEventParams extends EventParams, OpenFnrParams { }
 
-  export interface FnrChangeParams extends OpenFnrParams {}
+  export interface FnrChangeParams extends OpenFnrParams { }
   export interface FnrChangeEventParams extends EventParams, FnrChangeParams { }
 
+  export interface FnrFindParams {
+    findValue: string;
+    row: any;
+    column: VxeTableDefines.ColumnInfo;
+  }
+  export interface FnrFindEventParams extends FnrFindParams { }
+
+  export interface FindAndReplaceResult {
+    row: any
+    _rowIndex: number
+    column: VxeTableDefines.ColumnInfo
+    _columnIndex: number
+  }
+
+  export interface FnrFindAllParams {
+    findValue: string;
+    result: FindAndReplaceResult[]
+  }
+  export interface FnrFindAllEventParams extends FnrFindAllParams { }
+
+  export interface FnrReplaceParams {
+    findValue: string;
+    replaceValue: string;
+    row: any;
+    column: VxeTableDefines.ColumnInfo;
+  }
+  export interface FnrReplaceEventParams extends FnrReplaceParams { }
+
+  export interface FnrReplaceAllParams {
+    findValue: string;
+    replaceValue: string;
+    result: FindAndReplaceResult[]
+  }
+  export interface FnrReplaceAllEventParams extends FnrReplaceAllParams { }
+
   export interface CellAreaCopyParams {
     status: boolean;
     targetAreas: VxeTableProDefines.CellAreaParams[];
@@ -195,6 +230,10 @@ export type VxeTableProEmits = [
 
   'open-fnr',
   'fnr-change',
+  'fnr-find',
+  'fnr-find-all',
+  'fnr-replace',
+  'fnr-replace-all',
   'cell-area-copy',
   'cell-area-cut',
   'cell-area-paste',
@@ -211,16 +250,28 @@ declare module '../table' {
   interface VxeTableEventProps {
     onOpenFnr?: VxeTableEvents.OpenFnr;
     onFnrChange?: VxeTableEvents.FnrChange;
+    onFnrFind?: VxeTableEvents.FnrFind;
+    onFnrFindAll?: VxeTableEvents.FnrFindAll;
+    onFnrReplace?: VxeTableEvents.FnrReplace;
+    onFnrReplaceAll?: VxeTableEvents.FnrReplaceAll;
     onCellAreaCopy?: VxeTableEvents.CellAreaCopy;
   }
   interface VxeTableListeners {
     openFnr?: VxeTableEvents.OpenFnr;
     fnrChange?: VxeTableEvents.FnrChange;
+    fnrFind?: VxeTableEvents.FnrFind;
+    fnrFindAll?: VxeTableEvents.FnrFindAll;
+    fnrReplace?: VxeTableEvents.FnrReplace;
+    fnrReplaceAll?: VxeTableEvents.FnrReplaceAll;
     cellAreaCopy?: VxeTableEvents.CellAreaCopy;
   }
   namespace VxeTableEvents {
     export type OpenFnr = (params: VxeTableProDefines.OpenFnrParams) => void;
     export type FnrChange = (params: VxeTableProDefines.FnrChangeParams) => void;
+    export type FnrFind = (params: VxeTableProDefines.FnrFindParams) => void;
+    export type FnrFindAll = (params: VxeTableProDefines.FnrFindAllParams) => void;
+    export type FnrReplace = (params: VxeTableProDefines.FnrReplaceParams) => void;
+    export type FnrReplaceAll = (params: VxeTableProDefines.FnrReplaceAllParams) => void;
     export type CellAreaCopy = (params: VxeTableProDefines.CellAreaCopyParams) => void;
   }
 }
@@ -229,16 +280,28 @@ declare module '../grid' {
   interface VxeGridEventProps {
     onOpenFnr?: VxeGridEvents.OpenFnr;
     onFnrChange?: VxeGridEvents.FnrChange;
+    onFnrFind?: VxeGridEvents.FnrFind;
+    onFnrFindAll?: VxeGridEvents.FnrFindAll;
+    onFnrReplace?: VxeGridEvents.FnrReplace;
+    onFnrReplaceAll?: VxeGridEvents.FnrReplaceAll;
     onCellAreaCopy?: VxeGridEvents.CellAreaCopy;
   }
   interface VxeGridListeners {
     openFnr?: VxeGridEvents.OpenFnr;
     changeFnr?: VxeGridEvents.FnrChange;
+    fnrFind?: VxeGridEvents.FnrFind;
+    fnrFindAll?: VxeGridEvents.FnrFindAll;
+    fnrReplace?: VxeGridEvents.FnrReplace;
+    fnrReplaceAll?: VxeGridEvents.FnrReplaceAll;
     cellAreaCopy?: VxeGridEvents.CellAreaCopy;
   }
   namespace VxeGridEvents {
     export type OpenFnr = (params: VxeTableProDefines.OpenFnrParams) => void;
     export type FnrChange = (params: VxeTableProDefines.FnrChangeParams) => void;
+    export type FnrFind = (params: VxeTableProDefines.FnrFindParams) => void;
+    export type FnrFindAll = (params: VxeTableProDefines.FnrFindAllParams) => void;
+    export type FnrReplace = (params: VxeTableProDefines.FnrReplaceParams) => void;
+    export type FnrReplaceAll = (params: VxeTableProDefines.FnrReplaceAllParams) => void;
     export type CellAreaCopy = (params: VxeTableProDefines.CellAreaCopyParams) => void;
   }
 }

types/table.d.ts

@@ -1726,9 +1726,16 @@ export namespace VxeTablePropTypes {
       findRE: RegExp | null;
     }): boolean;
     beforeFindMethod?(params: {
+      isAll: boolean;
       findValue: string | null;
       $table: VxeTableConstructor & VxeTablePrivateMethods;
     }): boolean;
+    afterFindMethod?(params: {
+      isAll: boolean;
+      findValue: string | null;
+      result: VxeTableProDefines.FindAndReplaceResult[];
+      $table: VxeTableConstructor & VxeTablePrivateMethods;
+    }): void;
     isReplace?: boolean;
     replaceMethod?: (params: {
       row: any;
@@ -1736,10 +1743,18 @@ export namespace VxeTablePropTypes {
       cellValue: any;
     }) => void;
     beforeReplaceMethod?: (params: {
+      isAll: boolean;
       findValue: string | null;
       replaceValue: string;
       $table: VxeTableConstructor & VxeTablePrivateMethods;
     }) => boolean;
+    afterReplaceMethod?: (params: {
+      isAll: boolean;
+      findValue: string | null;
+      replaceValue: string;
+      result: VxeTableProDefines.FindAndReplaceResult[];
+      $table: VxeTableConstructor & VxeTablePrivateMethods;
+    }) => void;
   }
   export interface FNROpts extends FNRConfig { }