优化编辑模式渲染

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxe-table",
-  "version": "4.3.13-beta.0",
+  "version": "4.3.13-beta.1",
   "description": "一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器等...",
   "scripts": {
     "update": "npm install --legacy-peer-deps",

packages/edit/src/hook.ts

@@ -122,7 +122,7 @@ const editHook: VxeGlobalHooksHandles.HookOptions = {
         if (!XEUtils.isArray(records)) {
           records = [records]
         }
-        const newRecords: any[] = records.map((record: any) => $xetable.defineField(Object.assign({}, record)))
+        const newRecords: any[] = $xetable.defineField(records.map((record: any) => Object.assign({}, record)))
         if (!row) {
           // 如果为虚拟树
           if (treeConfig && transform) {
@@ -216,13 +216,19 @@ const editHook: VxeGlobalHooksHandles.HookOptions = {
             }
           }
         }
-        editStore.insertList.unshift(...newRecords)
-        $xetable.updateFooter()
+        const { insertList, insertMaps } = editStore
+        newRecords.forEach(newRow => {
+          const rowid = getRowid($xetable, newRow)
+          insertMaps[rowid] = newRow
+        })
+        insertList.unshift(...newRecords)
         $xetable.cacheRowMap()
+        $xetable.updateScrollYStatus()
         $xetable.handleTableData(treeConfig && transform)
         if (!(treeConfig && transform)) {
           $xetable.updateAfterDataIndex()
         }
+        $xetable.updateFooter()
         $xetable.checkSelectionStatus()
         if (reactData.scrollYLoad) {
           $xetable.updateScrollYSpace()
@@ -250,7 +256,7 @@ const editHook: VxeGlobalHooksHandles.HookOptions = {
         const checkboxOpts = computeCheckboxOpts.value
         const treeOpts = computeTreeOpts.value
         const { transform } = treeOpts
-        const { actived, removeList, insertList } = editStore
+        const { actived, removeList, insertList, insertMaps } = editStore
         const { checkField } = checkboxOpts
         let rest: any[] = []
         if (!rows) {
@@ -323,10 +329,12 @@ const editHook: VxeGlobalHooksHandles.HookOptions = {
         }
         // 从新增中移除已删除的数据
         rows.forEach((row: any) => {
+          const rowid = getRowid($xetable, row)
           const iIndex = $xetable.findRowIndexOf(insertList, row)
           if (iIndex > -1) {
             insertList.splice(iIndex, 1)
           }
+          delete insertMaps[rowid]
         })
         $xetable.updateFooter()
         $xetable.cacheRowMap()
@@ -388,30 +396,16 @@ const editHook: VxeGlobalHooksHandles.HookOptions = {
        * 获取新增的临时数据
        */
       getInsertRecords () {
-        const { treeConfig } = props
         const { editStore } = reactData
-        const { tableFullTreeData, tableFullData } = internalData
-        const treeOpts = computeTreeOpts.value
+        const { fullAllDataRowIdData } = internalData
         const insertList = editStore.insertList
         const insertRecords: any[] = []
-        if (insertList.length) {
-          // 如果为虚拟树
-          if (treeConfig && treeOpts.transform) {
-            insertList.forEach(row => {
-              const rowid = getRowid($xetable, row)
-              const matchObj = XEUtils.findTree(tableFullTreeData, item => rowid === getRowid($xetable, item), treeOpts)
-              if (matchObj) {
-                insertRecords.push(row)
-              }
-            })
-          } else {
-            insertList.forEach(row => {
-              if ($xetable.findRowIndexOf(tableFullData, row) > -1) {
-                insertRecords.push(row)
-              }
-            })
+        insertList.forEach(row => {
+          const rowid = getRowid($xetable, row)
+          if (fullAllDataRowIdData[rowid]) {
+            insertRecords.push(row)
           }
-        }
+        })
         return insertRecords
       },
       /**

packages/table/src/body.ts

@@ -318,7 +318,7 @@ export default defineComponent({
 
     const renderRows = (fixedType: any, tableData: any, tableColumn: any) => {
       const { stripe, rowKey, highlightHoverRow, rowClassName, rowStyle, showOverflow: allColumnOverflow, editConfig, treeConfig } = tableProps
-      const { hasFixedColumn, treeExpandeds, scrollYLoad, editStore, rowExpandeds, expandColumn, selectRow } = tableReactData
+      const { hasFixedColumn, treeExpandeds, scrollYLoad, rowExpandeds, expandColumn, selectRow } = tableReactData
       const { fullAllDataRowIdData } = tableInternalData
       const checkboxOpts = computeCheckboxOpts.value
       const radioOpts = computeRadioOpts.value
@@ -366,7 +366,7 @@ export default defineComponent({
         // 处理新增状态
         let isNewRow = false
         if (editConfig) {
-          isNewRow = $xetable.findRowIndexOf(editStore.insertList, row) > -1
+          isNewRow = $xetable.isInsertByRow(row)
         }
         if (treeConfig && !scrollYLoad && !transform && treeExpandeds.length) {
           rowChildren = row[treeOpts.children]

packages/table/src/table.ts

@@ -164,7 +164,9 @@ export default defineComponent({
           column: null
         },
         insertList: [],
-        removeList: []
+        insertMaps: {},
+        removeList: [],
+        removeMaps: {}
       },
       // 存放 tooltip 相关信息
       tooltipStore: {
@@ -2099,7 +2101,9 @@ export default defineComponent({
       scrollXStore.startIndex = 0
       scrollXStore.endIndex = 1
       editStore.insertList = []
+      editStore.insertMaps = {}
       editStore.removeList = []
+      editStore.removeMaps = {}
       const sYLoad = updateScrollYStatus(fullData)
       reactData.scrollYLoad = sYLoad
       // 全量数据
@@ -2373,13 +2377,14 @@ export default defineComponent({
       })
     }
 
-    const updateScrollYStatus = (fullData: any[]) => {
+    const updateScrollYStatus = (fullData?: any[]) => {
       const { treeConfig } = props
       const sYOpts = computeSYOpts.value
       const treeOpts = computeTreeOpts.value
       const { transform } = treeOpts
+      const allList = fullData || internalData.tableFullData
       // 如果gt为0，则总是启用
-      const scrollYLoad = (transform || !treeConfig) && !!sYOpts.enabled && sYOpts.gt > -1 && (sYOpts.gt === 0 || sYOpts.gt < fullData.length)
+      const scrollYLoad = (transform || !treeConfig) && !!sYOpts.enabled && sYOpts.gt > -1 && (sYOpts.gt === 0 || sYOpts.gt < allList.length)
       reactData.scrollYLoad = scrollYLoad
       return scrollYLoad
     }
@@ -2846,7 +2851,8 @@ export default defineComponent({
        */
       isInsertByRow (row) {
         const { editStore } = reactData
-        return $xetable.findRowIndexOf(editStore.insertList, row) > -1
+        const rowid = getRowid($xetable, row)
+        return editStore.insertList.length && editStore.insertMaps[rowid]
       },
       /**
        * 删除所有新增的临时数据
@@ -4637,44 +4643,49 @@ export default defineComponent({
       },
       /**
        * 定义行数据中的列属性，如果不存在则定义
-       * @param {Row} record 行数据
+       * @param {Row} records 行数据
        */
-      defineField (record) {
+      defineField (records) {
         const { treeConfig } = props
         const expandOpts = computeExpandOpts.value
         const treeOpts = computeTreeOpts.value
         const radioOpts = computeRadioOpts.value
         const checkboxOpts = computeCheckboxOpts.value
         const rowkey = getRowkey($xetable)
-        internalData.tableFullColumn.forEach(column => {
-          const { field, editRender } = column
-          if (field && !XEUtils.has(record, field) && !record[field]) {
-            let cellValue = null
-            if (editRender) {
-              const { defaultValue } = editRender
-              if (XEUtils.isFunction(defaultValue)) {
-                cellValue = defaultValue({ column })
-              } else if (!XEUtils.isUndefined(defaultValue)) {
-                cellValue = defaultValue
+        if (!XEUtils.isArray(records)) {
+          records = [records]
+        }
+        return records.map(record => {
+          internalData.tableFullColumn.forEach(column => {
+            const { field, editRender } = column
+            if (field && !XEUtils.has(record, field) && !record[field]) {
+              let cellValue = null
+              if (editRender) {
+                const { defaultValue } = editRender
+                if (XEUtils.isFunction(defaultValue)) {
+                  cellValue = defaultValue({ column })
+                } else if (!XEUtils.isUndefined(defaultValue)) {
+                  cellValue = defaultValue
+                }
               }
+              XEUtils.set(record, field, cellValue)
             }
-            XEUtils.set(record, field, cellValue)
+          })
+          const otherFields: (string | undefined)[] = [radioOpts.labelField, checkboxOpts.checkField, checkboxOpts.labelField, expandOpts.labelField]
+          otherFields.forEach((key) => {
+            if (key && eqEmptyValue(XEUtils.get(record, key))) {
+              XEUtils.set(record, key, null)
+            }
+          })
+          if (treeConfig && treeOpts.lazy && XEUtils.isUndefined(record[treeOpts.children])) {
+            record[treeOpts.children] = null
           }
-        })
-        const otherFields: (string | undefined)[] = [radioOpts.labelField, checkboxOpts.checkField, checkboxOpts.labelField, expandOpts.labelField]
-        otherFields.forEach((key) => {
-          if (key && eqEmptyValue(XEUtils.get(record, key))) {
-            XEUtils.set(record, key, null)
+          // 必须有行数据的唯一主键，可以自行设置；也可以默认生成一个随机数
+          if (eqEmptyValue(XEUtils.get(record, rowkey))) {
+            XEUtils.set(record, rowkey, getRowUniqueId())
           }
+          return record
         })
-        if (treeConfig && treeOpts.lazy && XEUtils.isUndefined(record[treeOpts.children])) {
-          record[treeOpts.children] = null
-        }
-        // 必须有行数据的唯一主键，可以自行设置；也可以默认生成一个随机数
-        if (eqEmptyValue(XEUtils.get(record, rowkey))) {
-          XEUtils.set(record, rowkey, getRowUniqueId())
-        }
-        return record
       },
       handleTableData (force?: boolean) {
         const { scrollYLoad } = reactData
@@ -5405,6 +5416,7 @@ export default defineComponent({
         }
         return Promise.all(rests).then(() => rowToVisible($xetable, row))
       },
+      updateScrollYStatus,
       // 更新横向 X 可视渲染上下剩余空间大小
       updateScrollXSpace () {
         const { isGroup, scrollXLoad, scrollbarWidth } = reactData

types/table.d.ts

@@ -106,6 +106,7 @@ export interface TablePublicMethods {
    */
   clearAll(): Promise<any>
   /**
+   * 该方法已废弃！！！
    * 同步 data 数据；如果用了该方法，那么组件将不再记录增删改的状态，只能自行实现对应逻辑
    * 对于某些特殊的场景，比如深层树节点元素发生变动时可能会用到
    * @deprecated
@@ -702,7 +703,7 @@ export interface TablePrivateMethods {
   getParentElem(): Element | null
   getParentHeight(): number
   getExcludeHeight(): number
-  defineField(record: any): any
+  defineField(records: any[]): any
   handleTableData(force?: boolean): Promise<any>
   cacheRowMap(isSource?: boolean): void
   saveCustomResizable(isReset?: boolean): void
@@ -737,6 +738,7 @@ export interface TablePrivateMethods {
   triggerScrollXEvent(evnt: Event): void
   triggerScrollYEvent(evnt: Event): void
   scrollToTreeRow(row: any): Promise<any>
+  updateScrollYStatus(fullData?: any[]): boolean
   updateScrollXSpace(): void
   updateScrollYSpace(): void
   updateScrollXData(): void
@@ -884,7 +886,13 @@ export interface TableReactData {
       [key: string]: any
     },
     insertList: any[]
+    insertMaps: {
+      [key: string]: any
+    }
     removeList: any[]
+    removeMaps: {
+      [key: string]: any
+    }
   },
   // 存放 tooltip 相关信息
   tooltipStore: {