mirror of
https://github.com/element-plus/element-plus.git
synced 2024-11-21 01:02:59 +08:00
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:
parent
39faf4beaa
commit
d2fb4ffc50
@ -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)
|
||||
})
|
||||
})
|
||||
|
@ -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
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user