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/util.ts

@@ -2,7 +2,7 @@
 import { createPopper } from '@popperjs/core'
 import { flatMap, get } from 'lodash-unified'
 import escapeHtml from 'escape-html'
-import { hasOwn, throwError } from '@element-plus/utils'
+import { hasOwn, isArray, isBoolean, throwError } from '@element-plus/utils'
 import { useZIndex } from '@element-plus/hooks'
 import type {
   IPopperOptions,
@@ -251,14 +251,24 @@ export function toggleRowStatus<T>(
 
   const addRow = () => {
     statusArr.push(row)
+    if (isArray(row.children)) {
+      row.children.forEach((item) => {
+        toggleRowStatus(statusArr, item, newVal ?? !included)
+      })
+    }
     changed = true
   }
   const removeRow = () => {
     statusArr.splice(index, 1)
+    if (isArray(row.children)) {
+      row.children.forEach((item) => {
+        toggleRowStatus(statusArr, item, newVal ?? !included)
+      })
+    }
     changed = true
   }
 
-  if (typeof newVal === 'boolean') {
+  if (isBoolean(newVal)) {
     if (newVal && !included) {
       addRow()
     } else if (!newVal && included) {