fix: adapt to tree children use splice to add row (#3543)

packages/vue/src/grid/src/composable/useData.ts

@@ -1,3 +1,4 @@
+import { hooks } from '@opentiny/vue-common'
 import { getRowid } from '@opentiny/vue-renderless/grid/utils'
 
 const isContented = (array) => Array.isArray(array) && array.length > 0
@@ -102,7 +103,6 @@ export const buildRenderGraph = ($table) => {
 export const tileFullData = ($table) => {
   const { treeConfig, rowGroup, groupFullData, afterFullData } = $table
 
-  // @ts-expect-error
   const tileInfo = makeTile({
     list: !treeConfig && rowGroup?.field ? groupFullData : afterFullData,
     getID: (row) => getRowid($table, row),
@@ -124,3 +124,37 @@ export const graphFullData = ($table) => {
     $table._graphInfo = graphInfo
   }
 }
+
+const getTreeLength = (tree, childrenKey = 'children') => {
+  let length = tree.length
+
+  for (const node of tree) {
+    const children = node[childrenKey]
+
+    if (children && children.length > 0) {
+      length += getTreeLength(children, childrenKey)
+    }
+  }
+
+  return length
+}
+
+const getTiledLength = (props) => {
+  const data = props.data || []
+  const { children: childrenKey } = props.treeConfig || {}
+
+  return props.treeConfig ? getTreeLength(data, childrenKey) : data.length
+}
+
+export const useData = (props) => {
+  const $table = hooks.getCurrentInstance()?.proxy
+  // 原始数据展开长度
+  const tiledLength = hooks.ref(0)
+
+  hooks.watch([() => props.data, () => getTiledLength(props)], ([_, length]) => {
+    tiledLength.value = length
+    $table?.handleDataChange()
+  })
+
+  return { tiledLength }
+}

packages/vue/src/grid/src/table/src/methods.ts

@@ -85,7 +85,7 @@ import {
   onScrollXLoad
 } from './utils/refreshColumn'
 import { mapFetchColumnPromise } from './utils/handleResolveColumn'
-import { hooks, isVue2 } from '@opentiny/vue-common'
+import { hooks } from '@opentiny/vue-common'
 import { computeScrollYLoad, computeScrollXLoad } from './utils/computeScrollLoad'
 import { calcTableWidth, calcFixedDetails } from './utils/autoCellWidth'
 import { funcs, headerProps, handleAllColumnPromises } from './funcs'
@@ -2028,21 +2028,6 @@ const Methods = {
       this._isUpdateData = false
     }
   },
-  watchDataForVue3() {
-    if (isVue2) return
-
-    const stopWatch = hooks.watch(
-      [() => this.data, () => this.data && this.data.length],
-      ([newData, newLength], [oldData, oldLength]) => {
-        // vue3下额外监控数组长度改变，解决push无响应等问题
-        if (Array.isArray(this.data) && newData === oldData && newLength !== oldLength) {
-          this.handleDataChange()
-        }
-      }
-    )
-
-    hooks.onBeforeUnmount(() => stopWatch())
-  },
   getVm(name) {
     return this.$grid.getVm(name)
   },

packages/vue/src/grid/src/table/src/table.ts

@@ -46,7 +46,7 @@ import methods from './methods'
 import GlobalConfig from '../../config'
 import { error } from '../../tools'
 import MfTable from '../../mobile-first/index.vue'
-import { useDrag, useRowGroup } from '../../composable'
+import { useData, useDrag, useRowGroup } from '../../composable'
 import { isServer } from '@opentiny/utils'
 
 const { themes, viewConfig, columnLevelKey, defaultColumnName } = GlobalConfig
@@ -527,10 +527,6 @@ export default defineComponent({
       !this.isUpdateCustoms && this.mergeCustomColumn(value)
       this.isUpdateCustoms = false
     },
-    data() {
-      // data的监控处理：a、在vue2中，数组对象替换、数组长度改变和数组项属性改变；b、在vue3中，数组对象替换
-      this.handleDataChange()
-    },
     height() {
       this.$nextTick(this.recalculate)
     },
@@ -619,9 +615,6 @@ export default defineComponent({
 
     bindEvent(this)
 
-    // vue3下额外监控数组长度改变，解决push无响应等问题
-    this.watchDataForVue3()
-
     // 设置表格实例
     this.$grid.connect({ name: 'table', vm: this })
   },
@@ -735,6 +728,8 @@ export default defineComponent({
 
     useRowGroup({ props, visibleColumn, tableFullColumn, tableColumn, columnStore })
 
+    const { tiledLength } = useData(props)
+
     hooks.onMounted(() => {
       $table.addIntersectionObserver()
 
@@ -823,7 +818,8 @@ export default defineComponent({
       bodyWrapperMaxHeight,
       bodyTableWidth,
       scrollLoadScrollHeight,
-      columnStore
+      columnStore,
+      tiledLength
     }
   },
   render() {