diff --git a/packages/vue/src/grid/src/composable/useData.ts b/packages/vue/src/grid/src/composable/useData.ts index cbf29c6e66..3a781bb284 100644 --- a/packages/vue/src/grid/src/composable/useData.ts +++ b/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 } +} diff --git a/packages/vue/src/grid/src/table/src/methods.ts b/packages/vue/src/grid/src/table/src/methods.ts index 63e1b7b521..09bfd98b82 100644 --- a/packages/vue/src/grid/src/table/src/methods.ts +++ b/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' @@ -1983,21 +1983,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) }, diff --git a/packages/vue/src/grid/src/table/src/table.ts b/packages/vue/src/grid/src/table/src/table.ts index a3a8988ed8..77723890c3 100644 --- a/packages/vue/src/grid/src/table/src/table.ts +++ b/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() {