fix(component): [table] can't select row children

packages/components/table/__tests__/table.test.ts

@@ -1506,4 +1506,52 @@ describe('Table.vue', () => {
       'min-width: 0'
     )
   })
+  it('selectable tree', async () => {
+    const wrapper = mount({
+      components: {
+        ElTable,
+        ElTableColumn,
+      },
+      template: `
+            <el-table :data="testData" @selection-change="change">
+              <el-table-column type="selection" />
+              <el-table-column prop="name" label="name" />
+              <el-table-column prop="release" label="release" />
+              <el-table-column prop="director" label="director" />
+              <el-table-column prop="runtime" label="runtime" />
+            </el-table>
+          `,
+      data() {
+        const testData = getTestData() as any
+        testData[1].children = [
+          {
+            name: "A Bug's Life copy 1",
+            release: '1998-11-25-1',
+            director: 'John Lasseter',
+            runtime: 95,
+          },
+          {
+            name: "A Bug's Life copy 2",
+            release: '1998-11-25-2',
+            director: 'John Lasseter',
+            runtime: 95,
+          },
+        ]
+        return {
+          testData,
+          selected: [],
+        }
+      },
+
+      methods: {
+        change(rows) {
+          this.selected = rows
+        },
+      },
+    })
+    await doubleWait()
+    wrapper.findAll('.el-checkbox')[2].trigger('click')
+    await doubleWait()
+    expect(wrapper.vm.selected.length).toEqual(3)
+  })
 })

packages/components/table/src/store/expand.ts

@@ -1,6 +1,6 @@
 // @ts-nocheck
 import { getCurrentInstance, ref } from 'vue'
-import { getKeysMap, getRowIdentity, toggleRowStatus } from '../util'
+import { getKeysMap, getRowIdentity } from '../util'
 
 import type { Ref } from 'vue'
 import type { WatcherPropsData } from '.'
@@ -32,7 +32,7 @@ function useExpand<T>(watcherData: WatcherPropsData<T>) {
   }
 
   const toggleRowExpansion = (row: T, expanded?: boolean) => {
-    const changed = toggleRowStatus(expandRows.value, row, expanded)
+    const changed = instance.store.toggleRowStatus(row, expanded)
     if (changed) {
       instance.emit('expand-change', row, expandRows.value.slice())
     }

packages/components/table/src/store/watcher.ts

@@ -7,7 +7,6 @@ import {
   getKeysMap,
   getRowIdentity,
   orderBy,
-  toggleRowStatus,
 } from '../util'
 import useExpand from './expand'
 import useCurrent from './current'
@@ -202,6 +201,49 @@ function useWatcher<T>() {
       instance.emit('selection-change', newSelection)
     }
   }
+  const toggleRowStatus = <T>(
+    statusArr: T[],
+    row: T,
+    newVal: boolean
+  ): boolean => {
+    let changed = false
+    const index = statusArr.indexOf(row)
+    const included = index !== -1
+
+    const addRow = () => {
+      statusArr.push(row)
+      if (isArray(row.children)) {
+        row.children.forEach((item) => {
+          toggleRowSelection(item, newVal ?? !included)
+        })
+      }
+      changed = true
+    }
+    const removeRow = () => {
+      statusArr.splice(index, 1)
+      if (row.children) {
+        row.children.forEach((item) => {
+          toggleRowSelection(item, newVal ?? !included)
+        })
+      }
+      changed = true
+    }
+
+    if (isBoolean(newVal)) {
+      if (newVal && !included) {
+        addRow()
+      } else if (!newVal && included) {
+        removeRow()
+      }
+    } else {
+      if (included) {
+        removeRow()
+      } else {
+        addRow()
+      }
+    }
+    return changed
+  }
 
   const _toggleAllSelection = () => {
     // when only some rows are selected (but not all), select or deselect all of them
@@ -482,6 +524,7 @@ function useWatcher<T>() {
     cleanSelection,
     getSelectionRows,
     toggleRowSelection,
+    toggleRowStatus,
     _toggleAllSelection,
     toggleAllSelection: null,
     updateSelectionByRowKey,

packages/components/table/src/util.ts

@@ -240,40 +240,6 @@ export function compose(...funcs) {
   )
 }
 
-export function toggleRowStatus<T>(
-  statusArr: T[],
-  row: T,
-  newVal: boolean
-): boolean {
-  let changed = false
-  const index = statusArr.indexOf(row)
-  const included = index !== -1
-
-  const addRow = () => {
-    statusArr.push(row)
-    changed = true
-  }
-  const removeRow = () => {
-    statusArr.splice(index, 1)
-    changed = true
-  }
-
-  if (typeof newVal === 'boolean') {
-    if (newVal && !included) {
-      addRow()
-    } else if (!newVal && included) {
-      removeRow()
-    }
-  } else {
-    if (included) {
-      removeRow()
-    } else {
-      addRow()
-    }
-  }
-  return changed
-}
-
 export function walkTreeNode(
   root,
   cb,