From 259cdf2880b0b30846033dd64cf306e59b56e078 Mon Sep 17 00:00:00 2001 From: faga Date: Tue, 25 Oct 2022 02:32:46 +0800 Subject: [PATCH 01/17] fix: table select children --- packages/components/table/src/util.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/packages/components/table/src/util.ts b/packages/components/table/src/util.ts index 2ebcdb43dbb62..4bb4fedc60b1b 100644 --- a/packages/components/table/src/util.ts +++ b/packages/components/table/src/util.ts @@ -251,10 +251,20 @@ export function toggleRowStatus( const addRow = () => { statusArr.push(row) + if (row.children) { + row.children.forEach((item) => { + statusArr.push(item) + }) + } changed = true } const removeRow = () => { statusArr.splice(index, 1) + if (row.children) { + row.children.forEach((item) => { + statusArr.splice(item, 1) + }) + } changed = true } From 45a0b28bc73b069597b748c151f12af8a3933deb Mon Sep 17 00:00:00 2001 From: faga Date: Tue, 25 Oct 2022 02:32:46 +0800 Subject: [PATCH 02/17] fix: table select children --- packages/components/table/src/util.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/packages/components/table/src/util.ts b/packages/components/table/src/util.ts index 02c6e41945ec2..14e536c8720f5 100644 --- a/packages/components/table/src/util.ts +++ b/packages/components/table/src/util.ts @@ -251,10 +251,20 @@ export function toggleRowStatus( const addRow = () => { statusArr.push(row) + if (row.children) { + row.children.forEach((item) => { + statusArr.push(item) + }) + } changed = true } const removeRow = () => { statusArr.splice(index, 1) + if (row.children) { + row.children.forEach((item) => { + statusArr.splice(item, 1) + }) + } changed = true } From e789320c34b8312a0db3c69ffa3a1dccc807dd72 Mon Sep 17 00:00:00 2001 From: faga Date: Tue, 25 Oct 2022 14:47:41 +0800 Subject: [PATCH 03/17] test(components): selectable tree table --- .../components/table/__tests__/table.test.ts | 48 +++++++++++++++++++ 1 file changed, 48 insertions(+) diff --git a/packages/components/table/__tests__/table.test.ts b/packages/components/table/__tests__/table.test.ts index e4ded8163406c..afa9d36ff2ac9 100644 --- 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: ` + + + + + + + + `, + 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) + }) }) From 582ef4702e3380f54a956916729022eb37dc4c6c Mon Sep 17 00:00:00 2001 From: faga Date: Tue, 25 Oct 2022 18:32:52 +0800 Subject: [PATCH 04/17] fix: toggle multiple-layer tree --- packages/components/table/src/util.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/table/src/util.ts b/packages/components/table/src/util.ts index 14e536c8720f5..1103239dc08a2 100644 --- a/packages/components/table/src/util.ts +++ b/packages/components/table/src/util.ts @@ -253,7 +253,7 @@ export function toggleRowStatus( statusArr.push(row) if (row.children) { row.children.forEach((item) => { - statusArr.push(item) + toggleRowStatus(statusArr, item, newVal) }) } changed = true @@ -262,7 +262,7 @@ export function toggleRowStatus( statusArr.splice(index, 1) if (row.children) { row.children.forEach((item) => { - statusArr.splice(item, 1) + toggleRowStatus(statusArr, item, newVal) }) } changed = true From ca1116767a8f07bd946f3b24595aeb40dd62439d Mon Sep 17 00:00:00 2001 From: faga Date: Sat, 29 Oct 2022 03:09:27 +0800 Subject: [PATCH 05/17] fix(components): [table] toggleRowStatus fix --- packages/components/table/src/store/expand.ts | 4 +- .../components/table/src/store/watcher.ts | 45 ++++++++++++++++++- packages/components/table/src/util.ts | 44 ------------------ 3 files changed, 46 insertions(+), 47 deletions(-) diff --git a/packages/components/table/src/store/expand.ts b/packages/components/table/src/store/expand.ts index 977b1d66a295d..15e73ec30c3f6 100644 --- a/packages/components/table/src/store/expand.ts +++ b/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(watcherData: WatcherPropsData) { } 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()) } diff --git a/packages/components/table/src/store/watcher.ts b/packages/components/table/src/store/watcher.ts index cf6ffdb3a03a7..464237649fb49 100644 --- a/packages/components/table/src/store/watcher.ts +++ b/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() { instance.emit('selection-change', newSelection) } } + const toggleRowStatus = ( + 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 (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 (typeof newVal === 'boolean') { + 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() { cleanSelection, getSelectionRows, toggleRowSelection, + toggleRowStatus, _toggleAllSelection, toggleAllSelection: null, updateSelectionByRowKey, diff --git a/packages/components/table/src/util.ts b/packages/components/table/src/util.ts index 1103239dc08a2..939304702af47 100644 --- a/packages/components/table/src/util.ts +++ b/packages/components/table/src/util.ts @@ -240,50 +240,6 @@ export function compose(...funcs) { ) } -export function toggleRowStatus( - 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 (row.children) { - row.children.forEach((item) => { - toggleRowStatus(statusArr, item, newVal) - }) - } - changed = true - } - const removeRow = () => { - statusArr.splice(index, 1) - if (row.children) { - row.children.forEach((item) => { - toggleRowStatus(statusArr, item, newVal) - }) - } - 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, From 83787c1d2cfdd6c622def4a517feeea1147e8bfc Mon Sep 17 00:00:00 2001 From: faga Date: Mon, 31 Oct 2022 00:34:19 +0800 Subject: [PATCH 06/17] chore: suggest code style --- packages/components/table/src/store/watcher.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/table/src/store/watcher.ts b/packages/components/table/src/store/watcher.ts index 464237649fb49..284a5a78aba84 100644 --- a/packages/components/table/src/store/watcher.ts +++ b/packages/components/table/src/store/watcher.ts @@ -212,7 +212,7 @@ function useWatcher() { const addRow = () => { statusArr.push(row) - if (row.children) { + if (isArray(row.children)) { row.children.forEach((item) => { toggleRowSelection(item, newVal ?? !included) }) @@ -229,7 +229,7 @@ function useWatcher() { changed = true } - if (typeof newVal === 'boolean') { + if (isBoolean(newVal)) { if (newVal && !included) { addRow() } else if (!newVal && included) { From 660271baf7ee1f38a06d9b1bee616861dbf2cc32 Mon Sep 17 00:00:00 2001 From: faga Date: Mon, 31 Oct 2022 16:06:55 +0800 Subject: [PATCH 07/17] chore: isArray instead of row.children --- packages/components/table/src/store/watcher.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/table/src/store/watcher.ts b/packages/components/table/src/store/watcher.ts index 284a5a78aba84..4f08c222e5ae5 100644 --- a/packages/components/table/src/store/watcher.ts +++ b/packages/components/table/src/store/watcher.ts @@ -221,7 +221,7 @@ function useWatcher() { } const removeRow = () => { statusArr.splice(index, 1) - if (row.children) { + if (isArray(row.children)) { row.children.forEach((item) => { toggleRowSelection(item, newVal ?? !included) }) From ea3170f8de95daa23c6e35a3ca96fd02d3602ba6 Mon Sep 17 00:00:00 2001 From: faga Date: Mon, 31 Oct 2022 17:31:20 +0800 Subject: [PATCH 08/17] chore: fix unit test error --- packages/components/table/src/store/watcher.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/table/src/store/watcher.ts b/packages/components/table/src/store/watcher.ts index 4f08c222e5ae5..b2947c4988e46 100644 --- a/packages/components/table/src/store/watcher.ts +++ b/packages/components/table/src/store/watcher.ts @@ -1,6 +1,6 @@ // @ts-nocheck import { getCurrentInstance, ref, toRefs, unref, watch } from 'vue' -import { hasOwn } from '@element-plus/utils' +import { hasOwn, isArray, isBoolean } from '@element-plus/utils' import { getColumnById, getColumnByKey, From 1a52c34b2d7a3a7eaf8f07ce471ffa968a6eafcd Mon Sep 17 00:00:00 2001 From: faga Date: Mon, 31 Oct 2022 18:04:56 +0800 Subject: [PATCH 09/17] chore: select event trigger only once --- packages/components/table/src/store/expand.ts | 4 +- .../components/table/src/store/watcher.ts | 47 +------------------ packages/components/table/src/util.ts | 46 +++++++++++++++++- 3 files changed, 49 insertions(+), 48 deletions(-) diff --git a/packages/components/table/src/store/expand.ts b/packages/components/table/src/store/expand.ts index 15e73ec30c3f6..2b29d7accc601 100644 --- a/packages/components/table/src/store/expand.ts +++ b/packages/components/table/src/store/expand.ts @@ -1,6 +1,6 @@ // @ts-nocheck import { getCurrentInstance, ref } from 'vue' -import { getKeysMap, getRowIdentity } from '../util' +import { getKeysMap, getRowIdentity, toggleRowStatus } from '../util' import type { Ref } from 'vue' import type { WatcherPropsData } from '.' @@ -32,7 +32,7 @@ function useExpand(watcherData: WatcherPropsData) { } const toggleRowExpansion = (row: T, expanded?: boolean) => { - const changed = instance.store.toggleRowStatus(row, expanded) + const changed = toggleRowStatus(row, expanded) if (changed) { instance.emit('expand-change', row, expandRows.value.slice()) } diff --git a/packages/components/table/src/store/watcher.ts b/packages/components/table/src/store/watcher.ts index b2947c4988e46..d451e257a6acb 100644 --- a/packages/components/table/src/store/watcher.ts +++ b/packages/components/table/src/store/watcher.ts @@ -1,12 +1,13 @@ // @ts-nocheck import { getCurrentInstance, ref, toRefs, unref, watch } from 'vue' -import { hasOwn, isArray, isBoolean } from '@element-plus/utils' +import { hasOwn } from '@element-plus/utils' import { getColumnById, getColumnByKey, getKeysMap, getRowIdentity, orderBy, + toggleRowStatus, } from '../util' import useExpand from './expand' import useCurrent from './current' @@ -201,50 +202,6 @@ function useWatcher() { instance.emit('selection-change', newSelection) } } - const toggleRowStatus = ( - 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 (isArray(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 // depending on the value of selectOnIndeterminate diff --git a/packages/components/table/src/util.ts b/packages/components/table/src/util.ts index 939304702af47..19d508390908d 100644 --- 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, @@ -240,6 +240,50 @@ export function compose(...funcs) { ) } +export const toggleRowStatus = ( + 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) => { + 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 (isBoolean(newVal)) { + if (newVal && !included) { + addRow() + } else if (!newVal && included) { + removeRow() + } + } else { + if (included) { + removeRow() + } else { + addRow() + } + } + return changed +} + export function walkTreeNode( root, cb, From d97f2c8dfe809db568a2f0741505a02002e6d837 Mon Sep 17 00:00:00 2001 From: faga Date: Mon, 31 Oct 2022 18:11:05 +0800 Subject: [PATCH 10/17] style: code style change --- packages/components/table/src/store/expand.ts | 2 +- packages/components/table/src/store/watcher.ts | 1 + packages/components/table/src/util.ts | 4 ++-- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/components/table/src/store/expand.ts b/packages/components/table/src/store/expand.ts index 2b29d7accc601..977b1d66a295d 100644 --- a/packages/components/table/src/store/expand.ts +++ b/packages/components/table/src/store/expand.ts @@ -32,7 +32,7 @@ function useExpand(watcherData: WatcherPropsData) { } const toggleRowExpansion = (row: T, expanded?: boolean) => { - const changed = toggleRowStatus(row, expanded) + const changed = toggleRowStatus(expandRows.value, row, expanded) if (changed) { instance.emit('expand-change', row, expandRows.value.slice()) } diff --git a/packages/components/table/src/store/watcher.ts b/packages/components/table/src/store/watcher.ts index d451e257a6acb..7108e60a0a2b6 100644 --- a/packages/components/table/src/store/watcher.ts +++ b/packages/components/table/src/store/watcher.ts @@ -202,6 +202,7 @@ function useWatcher() { instance.emit('selection-change', newSelection) } } + const _toggleAllSelection = () => { // when only some rows are selected (but not all), select or deselect all of them // depending on the value of selectOnIndeterminate diff --git a/packages/components/table/src/util.ts b/packages/components/table/src/util.ts index 19d508390908d..b5d39db99eeb7 100644 --- a/packages/components/table/src/util.ts +++ b/packages/components/table/src/util.ts @@ -240,11 +240,11 @@ export function compose(...funcs) { ) } -export const toggleRowStatus = ( +export function toggleRowStatus( statusArr: T[], row: T, newVal: boolean -): boolean => { +): boolean { let changed = false const index = statusArr.indexOf(row) const included = index !== -1 From ada69306032c44c47ccccf137da393302e533647 Mon Sep 17 00:00:00 2001 From: faga Date: Mon, 31 Oct 2022 18:12:52 +0800 Subject: [PATCH 11/17] chore: code style change --- packages/components/table/src/store/watcher.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/components/table/src/store/watcher.ts b/packages/components/table/src/store/watcher.ts index 7108e60a0a2b6..cf6ffdb3a03a7 100644 --- a/packages/components/table/src/store/watcher.ts +++ b/packages/components/table/src/store/watcher.ts @@ -482,7 +482,6 @@ function useWatcher() { cleanSelection, getSelectionRows, toggleRowSelection, - toggleRowStatus, _toggleAllSelection, toggleAllSelection: null, updateSelectionByRowKey, From a03953c29b4ec29f8c8437dcba1aa27dc180c6b1 Mon Sep 17 00:00:00 2001 From: faga Date: Mon, 31 Oct 2022 22:05:37 +0800 Subject: [PATCH 12/17] chore: code integration --- packages/components/table/src/util.ts | 23 +++++++++-------------- 1 file changed, 9 insertions(+), 14 deletions(-) diff --git a/packages/components/table/src/util.ts b/packages/components/table/src/util.ts index b5d39db99eeb7..59ed47178f178 100644 --- a/packages/components/table/src/util.ts +++ b/packages/components/table/src/util.ts @@ -249,36 +249,31 @@ export function toggleRowStatus( const index = statusArr.indexOf(row) const included = index !== -1 - const addRow = () => { - statusArr.push(row) - if (isArray(row.children)) { - row.children.forEach((item) => { - toggleRowStatus(statusArr, item, newVal ?? !included) - }) + const toggleStatus = (type: 'add' | 'remove'): boolean => { + if (type === 'add') { + statusArr.push(row) + } else { + statusArr.splice(index, 1) } changed = true - } - const removeRow = () => { - statusArr.splice(index, 1) if (isArray(row.children)) { row.children.forEach((item) => { toggleRowStatus(statusArr, item, newVal ?? !included) }) } - changed = true } if (isBoolean(newVal)) { if (newVal && !included) { - addRow() + toggleStatus('add') } else if (!newVal && included) { - removeRow() + toggleStatus('remove') } } else { if (included) { - removeRow() + toggleStatus('remove') } else { - addRow() + toggleStatus('add') } } return changed From 9c13869394b83b0e819bcb2a44d302b3700162df Mon Sep 17 00:00:00 2001 From: faga Date: Tue, 1 Nov 2022 01:58:24 +0800 Subject: [PATCH 13/17] chore: code style change --- packages/components/table/src/util.ts | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/packages/components/table/src/util.ts b/packages/components/table/src/util.ts index 59ed47178f178..fb4ef9b4873aa 100644 --- a/packages/components/table/src/util.ts +++ b/packages/components/table/src/util.ts @@ -269,13 +269,7 @@ export function toggleRowStatus( } else if (!newVal && included) { toggleStatus('remove') } - } else { - if (included) { - toggleStatus('remove') - } else { - toggleStatus('add') - } - } + } else included ? toggleStatus('remove') : toggleStatus('add') return changed } From c2b206d9553ec836758b0e5bc23c46056091eca5 Mon Sep 17 00:00:00 2001 From: faga Date: Tue, 1 Nov 2022 02:07:47 +0800 Subject: [PATCH 14/17] chore: code style change --- packages/components/table/src/util.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/table/src/util.ts b/packages/components/table/src/util.ts index fb4ef9b4873aa..90526d91f18a4 100644 --- a/packages/components/table/src/util.ts +++ b/packages/components/table/src/util.ts @@ -249,7 +249,7 @@ export function toggleRowStatus( const index = statusArr.indexOf(row) const included = index !== -1 - const toggleStatus = (type: 'add' | 'remove'): boolean => { + const toggleStatus = (type: 'add' | 'remove') => { if (type === 'add') { statusArr.push(row) } else { From cce173819be69bda460395f4f27293f3397606f0 Mon Sep 17 00:00:00 2001 From: faga Date: Tue, 1 Nov 2022 02:11:59 +0800 Subject: [PATCH 15/17] chore: code style change --- packages/components/table/src/util.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/table/src/util.ts b/packages/components/table/src/util.ts index 90526d91f18a4..fe43a5e241ae5 100644 --- a/packages/components/table/src/util.ts +++ b/packages/components/table/src/util.ts @@ -269,7 +269,7 @@ export function toggleRowStatus( } else if (!newVal && included) { toggleStatus('remove') } - } else included ? toggleStatus('remove') : toggleStatus('add') + } else toggleStatus(included ? 'remove' : 'add') return changed } From fcdebd45b248ba88935b1df2549d58325cf35376 Mon Sep 17 00:00:00 2001 From: faga Date: Tue, 1 Nov 2022 11:11:01 +0800 Subject: [PATCH 16/17] chore: [table] code style change --- packages/components/table/src/util.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/table/src/util.ts b/packages/components/table/src/util.ts index fe43a5e241ae5..90526d91f18a4 100644 --- a/packages/components/table/src/util.ts +++ b/packages/components/table/src/util.ts @@ -269,7 +269,7 @@ export function toggleRowStatus( } else if (!newVal && included) { toggleStatus('remove') } - } else toggleStatus(included ? 'remove' : 'add') + } else included ? toggleStatus('remove') : toggleStatus('add') return changed } From ad9bd483d941bc2cfd2fdd8887057f0f4cef6752 Mon Sep 17 00:00:00 2001 From: faga Date: Tue, 1 Nov 2022 12:29:29 +0800 Subject: [PATCH 17/17] style: [table] brace style --- packages/components/table/src/util.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/components/table/src/util.ts b/packages/components/table/src/util.ts index 90526d91f18a4..2ac80c578e47e 100644 --- a/packages/components/table/src/util.ts +++ b/packages/components/table/src/util.ts @@ -269,7 +269,9 @@ export function toggleRowStatus( } else if (!newVal && included) { toggleStatus('remove') } - } else included ? toggleStatus('remove') : toggleStatus('add') + } else { + included ? toggleStatus('remove') : toggleStatus('add') + } return changed }