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

* fix: table select children * fix: table select children * test(components): selectable tree table * fix: toggle multiple-layer tree * fix(components): [table] toggleRowStatus fix * chore: suggest code style * chore: isArray instead of row.children * chore: fix unit test error * chore: select event trigger only once * style: code style change * chore: code style change * chore: code integration * chore: code style change * chore: code style change * chore: code style change * chore: [table] code style change * style: [table] brace style Co-authored-by: faga <lzc295592@163.com>
element-plus · Nov 5, 2022 · d2fb4ff · d2fb4ff
1 parent 39faf4b
commit d2fb4ff
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 15 deletions.
diff --git a/packages/components/table/__tests__/table.test.ts b/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)
+  })
 })
diff --git a/packages/components/table/src/util.ts b/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,
@@ -249,27 +249,28 @@ export function toggleRowStatus<T>(
   const index = statusArr.indexOf(row)
   const included = index !== -1
 
-  const addRow = () => {
-    statusArr.push(row)
-    changed = true
-  }
-  const removeRow = () => {
-    statusArr.splice(index, 1)
+  const toggleStatus = (type: 'add' | 'remove') => {
+    if (type === 'add') {
+      statusArr.push(row)
+    } else {
+      statusArr.splice(index, 1)
+    }
     changed = true
+    if (isArray(row.children)) {
+      row.children.forEach((item) => {
+        toggleRowStatus(statusArr, item, newVal ?? !included)
+      })
+    }
   }
 
-  if (typeof newVal === 'boolean') {
+  if (isBoolean(newVal)) {
     if (newVal && !included) {
-      addRow()
+      toggleStatus('add')
     } else if (!newVal && included) {
-      removeRow()
+      toggleStatus('remove')
     }
   } else {
-    if (included) {
-      removeRow()
-    } else {
-      addRow()
-    }
+    included ? toggleStatus('remove') : toggleStatus('add')
   }
   return changed
 }