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>
This commit is contained in:
faga 2022-11-05 17:18:37 +08:00 committed by GitHub
parent 39faf4beaa
commit d2fb4ffc50
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 64 additions and 15 deletions

View File

@ -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)
})
})

View File

@ -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
}