fix(table): issue: #505 (#508)

fix #505

packages/table/src/store/watcher.ts

@@ -120,9 +120,9 @@ function useWatcher() {
       updateColumns()
     }
     if (immediate) {
-      instance.vnode.state.doLayout()
+      instance.state.doLayout()
     } else {
-      instance.vnode.state.debouncedUpdateLayout()
+      instance.state.debouncedUpdateLayout()
     }
   }
 

packages/table/src/table-header/index.ts

@@ -79,7 +79,7 @@ export default defineComponent({
     } = useStyle(props)
     const { isGroup, toggleAllSelection, columnRows } = useUtils(props)
 
-    instance.vnode.state = {
+    instance.state = {
       onColumnsChange,
       onScrollableChange,
     }

packages/table/src/table-header/utils-helper.ts

@@ -69,7 +69,7 @@ function useUtils(props: TableHeaderProps) {
   })
   const isGroup = computed(() => {
     const result = columnRows.value.length > 1
-    if (result) parent.vnode.state.isGroup.value = true
+    if (result) parent.state.isGroup.value = true
     return result
   })
   const toggleAllSelection = (event: Event) => {

packages/table/src/table-layout.ts

@@ -242,7 +242,7 @@ class TableLayout {
       }
 
       this.bodyWidth.value = Math.max(bodyMinWidth, bodyWidth)
-      this.table.vnode.state.resizeState.value.width = this.bodyWidth.value
+      this.table.state.resizeState.value.width = this.bodyWidth.value
     } else {
       flattenColumns.forEach(column => {
         if (!column.width && !column.minWidth) {
@@ -298,10 +298,10 @@ class TableLayout {
     observers.forEach(observer => {
       switch (event) {
         case 'columns':
-          observer.vnode.state?.onColumnsChange(this)
+          observer.state?.onColumnsChange(this)
           break
         case 'scrollable':
-          observer.vnode.state?.onScrollableChange(this)
+          observer.state?.onScrollableChange(this)
           break
         default:
           throw new Error(`Table Layout don't have event ${event}.`)

packages/table/src/table.d.ts

@@ -267,7 +267,7 @@ interface TableRefs {
   [key: string]: unknown
 }
 
-interface TableVnodeState {
+interface TableState {
   isGroup: Ref<boolean>
   resizeState: Ref<{
     width: any
@@ -289,18 +289,14 @@ interface Table extends ComponentInternalInstance {
   layout: TableLayout
   refs: TableRefs
   tableId: string
-  vnode: VNode & {
-    state: TableVnodeState
-  }
+  state: TableState
 }
 
 interface TableHeader extends ComponentInternalInstance {
-  vnode: {
-    state: {
-      onColumnsChange
-      onScrollableChange
-    }
-  } & VNode
+  state: {
+    onColumnsChange
+    onScrollableChange
+  }
   filterPanels: Ref<AnyObject>
 }
 

packages/table/src/table.vue

@@ -392,7 +392,7 @@ export default defineComponent({
 
     const tableId = 'el-table_' + tableIdSeed++
     table.tableId = tableId
-    table.vnode.state = {
+    table.state = {
       isGroup,
       resizeState,
       doLayout,