vxe-table 4.1.6 → 4.1.9

package/packages/table/src/table.ts

@@ -11,7 +11,7 @@ import Cell from './cell'
 import TableBodyComponent from './body'
 import tableProps from './props'
 import tableEmits from './emits'
-import { getRowUniqueId, clearTableAllStatus, getRowkey, getRowid, rowToVisible, colToVisible, getCellValue, setCellValue, handleFieldOrColumn, restoreScrollLocation, restoreScrollListener, XEBodyScrollElement } from './util'
+import { getRowUniqueId, clearTableAllStatus, getRowkey, getRowid, rowToVisible, colToVisible, getCellValue, setCellValue, handleFieldOrColumn, toTreePathSeq, restoreScrollLocation, restoreScrollListener, XEBodyScrollElement } from './util'
 
 import { VxeGridConstructor, VxeGridPrivateMethods, VxeTableConstructor, TableReactData, TableInternalData, VxeTablePropTypes, VxeToolbarConstructor, VxeTooltipInstance, TablePrivateMethods, VxeTablePrivateRef, VxeTablePrivateComputed, VxeTablePrivateMethods, VxeTableMethods, TableMethods, VxeMenuPanelInstance, VxeTableDefines, VxeTableProps } from '../../../types/all'
 
@@ -271,8 +271,9 @@ export default defineComponent({
       tableFullColumn: [],
       // 渲染所有列
       visibleColumn: [],
-      // 缓存数据集
+      // 总的缓存数据集
       fullAllDataRowIdData: {},
+      // 渲染中缓存数据
       fullDataRowIdData: {},
       fullColumnIdData: {},
       fullColumnFieldData: {},
@@ -1130,17 +1131,49 @@ export default defineComponent({
       }
     }
 
+    /**
+     * 预编译
+     * 对渲染中的数据提前解析序号及索引。牺牲提前编译耗时换取渲染中额外损耗，使运行时更加流畅
+     */
     const updateAfterDataIndex = () => {
-      const { afterFullData, fullDataRowIdData } = internalData
-      afterFullData.forEach((row, _index) => {
-        const rowid = getRowid($xetable, row)
-        const rest = fullDataRowIdData[rowid]
-        if (rest) {
-          rest._index = _index
-        } else {
-          fullDataRowIdData[rowid] = { row, rowid, index: -1, $index: -1, _index, items: [], parent: null, level: 0 }
-        }
-      })
+      const { treeConfig } = props
+      const { afterFullData, fullDataRowIdData, fullAllDataRowIdData } = internalData
+      const { treeFullData } = internalData
+      const treeOpts = computeTreeOpts.value
+      if (treeConfig) {
+        XEUtils.eachTree(treeFullData, (row, index, items, path) => {
+          const rowid = getRowid($xetable, row)
+          const allrest = fullAllDataRowIdData[rowid]
+          const fullrest = fullDataRowIdData[rowid]
+          const seq = path.map((num, i) => i % 2 === 0 ? (Number(num) + 1) : '.').join('')
+          if (allrest) {
+            allrest.seq = seq
+          }
+          if (fullrest) {
+            fullrest.seq = seq
+          } else {
+            fullAllDataRowIdData[rowid] = { row, rowid, seq, index: -1, $index: -1, _index: index, items: [], parent: null, level: 0 }
+            fullDataRowIdData[rowid] = { row, rowid, seq, index: -1, $index: -1, _index: index, items: [], parent: null, level: 0 }
+          }
+        }, treeOpts)
+      } else {
+        afterFullData.forEach((row, index) => {
+          const rowid = getRowid($xetable, row)
+          const allrest = fullAllDataRowIdData[rowid]
+          const fullrest = fullDataRowIdData[rowid]
+          const seq = index + 1
+          if (allrest) {
+            allrest.seq = seq
+          }
+          if (fullrest) {
+            fullrest.seq = seq
+            fullrest._index = index
+          } else {
+            fullAllDataRowIdData[rowid] = { row, rowid, seq, index: -1, $index: -1, _index: index, items: [], parent: null, level: 0 }
+            fullDataRowIdData[rowid] = { row, rowid, seq, index: -1, $index: -1, _index: index, items: [], parent: null, level: 0 }
+          }
+        })
+      }
     }
 
     /**
@@ -2062,11 +2095,11 @@ export default defineComponent({
         tableMethods.clearMergeFooterItems()
       }
       reactData.scrollXLoad = scrollXLoad
-      visibleColumn.forEach((column, _index) => {
+      visibleColumn.forEach((column, index) => {
         const colid = column.id
         const rest = fullColumnIdData[colid]
         if (rest) {
-          rest._index = _index
+          rest._index = index
         }
       })
       internalData.visibleColumn = visibleColumn
@@ -2224,6 +2257,33 @@ export default defineComponent({
       }
     }
 
+    const createGetRowCacheProp = (prop: 'seq' | 'index' | '_index' | '$index') => {
+      return function (row: any) {
+        const { fullDataRowIdData } = internalData
+        if (row) {
+          const rowid = getRowid($xetable, row)
+          const rest = fullDataRowIdData[rowid]
+          if (rest) {
+            return rest[prop]
+          }
+        }
+        return -1
+      }
+    }
+
+    const createGetColumnCacheProp = (prop: 'index' | '_index' | '$index') => {
+      return function (column: VxeTableDefines.ColumnInfo) {
+        const { fullColumnIdData } = internalData
+        if (column) {
+          const rest = fullColumnIdData[column.id]
+          if (rest) {
+            return rest[prop]
+          }
+        }
+        return -1
+      }
+    }
+
     const debounceScrollY = XEUtils.debounce(function (evnt: Event) {
       loadScrollYData(evnt)
     }, 20, { leading: false, trailing: true })
@@ -2349,7 +2409,7 @@ export default defineComponent({
           }
           XEUtils.eachTree(rows, (childRow, index, items, path, parent, nodes) => {
             const rowid = getRowid($xetable, childRow)
-            const rest = { row: childRow, rowid, index: -1, _index: -1, $index: -1, items, parent, level: parentLevel + nodes.length }
+            const rest = { row: childRow, rowid, seq: -1, index: -1, _index: -1, $index: -1, items, parent, level: parentLevel + nodes.length }
             fullDataRowIdData[rowid] = rest
             fullAllDataRowIdData[rowid] = rest
           }, treeOpts)
@@ -2410,93 +2470,41 @@ export default defineComponent({
         }
         return null
       },
+      /**
+       * 根据 row 获取序号
+       * @param {Row} row 行对象
+       */
+      getRowSeq: createGetRowCacheProp('seq'),
       /**
        * 根据 row 获取相对于 data 中的索引
        * @param {Row} row 行对象
        */
-      getRowIndex (row) {
-        const { fullDataRowIdData } = internalData
-        if (row) {
-          const rowid = getRowid($xetable, row)
-          const rest = fullDataRowIdData[rowid]
-          if (rest) {
-            return rest.index
-          }
-        }
-        return -1
-      },
+      getRowIndex: createGetRowCacheProp('index') as ((row: any) => number),
       /**
        * 根据 row 获取相对于当前数据中的索引
        * @param {Row} row 行对象
        */
-      getVTRowIndex (row) {
-        const { fullDataRowIdData } = internalData
-        if (row) {
-          const rowid = getRowid($xetable, row)
-          const rest = fullDataRowIdData[rowid]
-          if (rest) {
-            return rest._index
-          }
-        }
-        return -1
-      },
+      getVTRowIndex: createGetRowCacheProp('_index') as ((row: any) => number),
       /**
        * 根据 row 获取渲染中的虚拟索引
        * @param {Row} row 行对象
        */
-      getVMRowIndex (row) {
-        const { fullDataRowIdData } = internalData
-        if (row) {
-          const rowid = getRowid($xetable, row)
-          const rest = fullDataRowIdData[rowid]
-          if (rest) {
-            return rest.$index
-          }
-        }
-        return -1
-      },
+      getVMRowIndex: createGetRowCacheProp('$index') as ((row: any) => number),
       /**
        * 根据 column 获取相对于 columns 中的索引
        * @param {ColumnInfo} column 列配置
        */
-      getColumnIndex (column) {
-        const { fullColumnIdData } = internalData
-        if (column) {
-          const rest = fullColumnIdData[column.id]
-          if (rest) {
-            return rest.index
-          }
-        }
-        return -1
-      },
+      getColumnIndex: createGetColumnCacheProp('index'),
       /**
        * 根据 column 获取相对于当前表格列中的索引
        * @param {ColumnInfo} column 列配置
        */
-      getVTColumnIndex (column) {
-        const { fullColumnIdData } = internalData
-        if (column) {
-          const rest = fullColumnIdData[column.id]
-          if (rest) {
-            return rest._index
-          }
-        }
-        return -1
-      },
+      getVTColumnIndex: createGetColumnCacheProp('_index'),
       /**
        * 根据 column 获取渲染中的虚拟索引
        * @param {ColumnInfo} column 列配置
        */
-      getVMColumnIndex (column) {
-        const { fullColumnIdData } = internalData
-        if (column) {
-          const rest = fullColumnIdData[column.id]
-          if (rest) {
-            return rest.$index
-          }
-        }
-        return -1
-      },
+      getVMColumnIndex: createGetColumnCacheProp('$index'),
       /**
        * 创建 data 对象
        * 对于某些特殊场景可能会用到，会自动对数据的字段名进行检测，如果不存在就自动定义
@@ -3230,7 +3238,7 @@ export default defineComponent({
                 return selectRow
               }
             } else {
-              if (afterFullData.indexOf(selectRow) > -1) {
+              if ($xetable.findRowIndexOf(afterFullData, selectRow) > -1) {
                 return selectRow
               }
             }
@@ -3993,6 +4001,7 @@ export default defineComponent({
       const { mouseConfig, keyboardConfig } = props
       const { filterStore, ctxMenuStore, editStore } = reactData
       const mouseOpts = computeMouseOpts.value
+      const keyboardOpts = computeKeyboardOpts.value
       const { actived } = editStore
       const isEsc = hasEventKey(evnt, EVENT_KEYS.ESCAPE)
       if (isEsc) {
@@ -4006,13 +4015,15 @@ export default defineComponent({
               $xetable.closeMenu()
             }
             tableMethods.closeFilter()
-            // 如果是激活编辑状态，则取消编辑
-            if (actived.row) {
-              const params = actived.args
-              $xetable.clearActived(evnt)
-              // 如果配置了选中功能，则为选中状态
-              if (mouseOpts.selected) {
-                nextTick(() => $xetable.handleSelected(params, evnt))
+            if (keyboardConfig && keyboardOpts.isEsc) {
+              // 如果是激活编辑状态，则取消编辑
+              if (actived.row) {
+                const params = actived.args
+                $xetable.clearActived(evnt)
+                // 如果配置了选中功能，则为选中状态
+                if (mouseOpts.selected) {
+                  nextTick(() => $xetable.handleSelected(params, evnt))
+                }
               }
             }
           }
@@ -4076,7 +4087,7 @@ export default defineComponent({
               $xetable.closeMenu()
             }
             tableMethods.closeFilter()
-            if (actived.row) {
+            if (keyboardConfig && keyboardOpts.isEsc) {
               // 如果是激活编辑状态，则取消编辑
               if (actived.row) {
                 const params = actived.args
@@ -4461,8 +4472,10 @@ export default defineComponent({
         let { fullDataRowIdData, fullAllDataRowIdData, tableFullData, treeFullData } = internalData
         const rowkey = getRowkey($xetable)
         const isLazy = treeConfig && treeOpts.lazy
-        const handleCache = (row: any, index: any, items: any, path?: any, parent?: any, nodes?: any[]) => {
+        const handleCache = (row: any, index: any, items: any, path?: any[], parent?: any, nodes?: any[]) => {
           let rowid = getRowid($xetable, row)
+          const seq = treeConfig && path ? toTreePathSeq(path) : index + 1
+          const level = nodes ? nodes.length - 1 : 0
           if (eqEmptyValue(rowid)) {
             rowid = getRowUniqueId()
             XEUtils.set(row, rowkey, rowid)
@@ -4470,7 +4483,7 @@ export default defineComponent({
           if (isLazy && row[treeOpts.hasChild] && XEUtils.isUndefined(row[treeOpts.children])) {
             row[treeOpts.children] = null
           }
-          const rest = { row, rowid, index: treeConfig && parent ? -1 : index, _index: -1, $index: -1, items, parent, level: nodes ? nodes.length - 1 : 0 }
+          const rest = { row, rowid, seq, index: treeConfig && parent ? -1 : index, _index: -1, $index: -1, items, parent, level }
           if (isSource) {
             fullDataRowIdData[rowid] = rest
           }

package/packages/table/src/util.ts

@@ -98,6 +98,10 @@ export function toFilters (filters: any) {
   return filters
 }
 
+export function toTreePathSeq (path: any[]) {
+  return path.map((num, i) => i % 2 === 0 ? (Number(num) + 1) : '.').join('')
+}
+
 export function getCellValue (row: any, column: any) {
   return XEUtils.get(row, column.property)
 }

package/packages/tools/dom.ts

@@ -142,12 +142,7 @@ export function scrollToView (elem: any) {
 }
 
 export function triggerEvent (targetElem: Element, type: string) {
-  let evnt
-  if (typeof Event === 'function') {
-    evnt = new Event(type)
-  } else {
-    evnt = document.createEvent('Event')
-    evnt.initEvent(type, true, true)
+  if (targetElem) {
+    targetElem.dispatchEvent(new Event(type))
   }
-  targetElem.dispatchEvent(evnt)
 }

package/packages/v-x-e-table/src/conf.ts

@@ -93,6 +93,9 @@ const GlobalConfig: VXETableGlobalConfig = {
     mouseConfig: {
       extension: true
     },
+    keyboardConfig: {
+      isEsc: true
+    },
     areaConfig: {
       selectCellByHeader: true
     },

package/types/filter.d.ts

@@ -32,6 +32,11 @@ export interface VxeFilterPanel {
 }
 
 export interface TableFilterMethods {
+  /**
+   * 手动弹出筛选
+   * @param fieldOrColumn 
+   */
+  openFilter(fieldOrColumn: VxeColumnPropTypes.Field | VxeTableDefines.ColumnInfo):Promise<any>;
   /**
    * 用于 filters，修改筛选列表
    * 在筛选条件更新之后可以调用 updateData 函数处理表格数据

package/types/plugins/pro.d.ts

@@ -81,6 +81,11 @@ declare module '../table' {
   interface VxeTablePrivateMethods extends VxeTableProPrivateMethods { }
 }
 
+declare module '../grid' {
+  interface VxeGridMethods extends VxeTableProMethods { }
+  interface VxeGridPrivateMethods extends VxeTableProPrivateMethods { }
+}
+
 export interface VXETableProClipboard {
   text?: string;
   html?: string;

package/types/table.d.ts

@@ -162,6 +162,11 @@ export interface TablePublicMethods {
     index: number;
     parent?: VxeTableDefines.ColumnInfo;
   } | null;
+  /**
+   * 根据 row 获取行的序号
+   * @param row 行对象
+   */
+  getRowSeq(row: any): string | number;
   /**
    * 根据 row 获取相对于 data 中的索引
    * @param row 行对象
@@ -969,6 +974,7 @@ export interface TableInternalData {
     [key: string]: {
       row: any;
       rowid: string;
+      seq: string | number;
       index: number;
       $index: number;
       _index: number;
@@ -989,6 +995,7 @@ export interface TableInternalData {
     [key: string]: {
       row: any;
       rowid: string;
+      seq: string | number;
       index: number;
       $index: number;
       _index: number;
@@ -1555,6 +1562,10 @@ export namespace VxeTablePropTypes {
      * 是否开启非编辑状态下，上下左右移动功能
      */
     isArrow?: boolean;
+    /**
+     * 是否开启Esc键退出编辑功能
+     */
+    isEsc?: boolean;
     /**
      * 是否开启删除键功能
      */
@@ -2143,8 +2154,7 @@ export namespace VxeTableDefines {
   }
   export interface CellRenderBodyParams {
     $table: VxeTableConstructor & VxeTablePrivateMethods;
-    $seq: string;
-    seq: number;
+    seq: string | number;
     rowid: string;
     row: any;
     rowIndex: number;