mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2024-12-27 03:01:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: table selectable callback index incorrect issue (#2393)

Browse Source
This commit is contained in:
msidolphin 2021-07-05 10:47:08 +08:00 committed by GitHub
parent 1f6fc8c38b
commit 627b1a941c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 164 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

137
packages/table/__tests__/table-column.spec.ts
View File

@ -1047,4 +1047,141 @@ describe('table column', () => {
wrapper.unmount()
})
})
describe('tree table', () => {
const getTableData = () => {
return [{
id: 1,
date: '2016-05-02',
name: 'Wangxiaohu',
address: '1518 Jinshajiang Road, Putuo District, Shanghai',
index: 1,
}, {
id: 2,
date: '2016-05-04',
name: 'Wangxiaohu',
address: '1518 Jinshajiang Road, Putuo District, Shanghai',
index: 2,
}, {
id: 3,
date: '2016-05-01',
name: 'Wangxiaohu',
address: '1518 Jinshajiang Road, Putuo District, Shanghai',
index: 3,
children: [{
id: 31,
date: '2016-05-01',
name: 'Wangxiaohu',
address: '1518 Jinshajiang Road, Putuo District, Shanghai',
index: 4,
children: [
{
id: 311,
date: '2016-05-01',
name: 'Wangxiaohu',
address: '1518 Jinshajiang Road, Putuo District, Shanghai',
index: 5,
},
{
id: 312,
date: '2016-05-01',
name: 'Wangxiaohu',
address: '1518 Jinshajiang Road, Putuo District, Shanghai',
index: 6,
},
{
id: 313,
date: '2016-05-01',
name: 'Wangxiaohu',
address: '1518 Jinshajiang Road, Putuo District, Shanghai',
index: 7,
disabled: true,
},
],
}, {
id: 32,
date: '2016-05-01',
name: 'Wangxiaohu',
address: '1518 Jinshajiang Road, Putuo District, Shanghai',
index: 8,
}],
}, {
id: 4,
date: '2016-05-03',
name: 'Wangxiaohu',
address: '1518 Jinshajiang Road, Putuo District, Shanghai',
index: 9,
}]
}
const createTable = function(methods) {
return mount(
Object.assign(
{
components: {
ElTable,
ElTableColumn,
},
template: `
<el-table
ref="table"
:data="testData"
row-key="id"
border
default-expand-all
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
>
<el-table-column type="index"></el-table-column>
<el-table-column type="selection" :selectable="selectable"></el-table-column>
<el-table-column prop="id" label="id"></el-table-column>
<el-table-column
prop="date"
label="Date"
sortable
width="180">
</el-table-column>
<el-table-column
prop="name"
label="Name"
sortable
width="180">
</el-table-column>
<el-table-column
prop="address"
label="Address">
</el-table-column>
</el-table>
`,
methods: {
selectable(row) {
return !row.disabled
},
...methods,
},
data() {
return {
testData: getTableData(),
}
},
},
),
)
}
it('selectable index parameter should be correct', async() => {
const result = []
const wrapper = createTable({
selectable(row, index) {
result.push((row.index - 1) === index)
return !row.disabled
},
})
await nextTick()
wrapper.vm.$refs.table.toggleAllSelection()
expect(result.every(item => item)).toBeTruthy()
wrapper.unmount()
})
})
})

29
packages/table/src/store/watcher.ts
View File

@ -193,10 +193,13 @@ function useWatcher<T>() {
isAllSelected.value = value
let selectionChanged = false
let childrenCount = 0
const rowKey = instance?.store?.states?.rowKey.value
data.value.forEach((row, index) => {
const rowIndex = index + childrenCount
if (selectable.value) {
if (
selectable.value.call(null, row, index) &&
selectable.value.call(null, row, rowIndex) &&
toggleRowStatus(selection.value, row, value)
) {
selectionChanged = true
@ -206,6 +209,7 @@ function useWatcher<T>() {
selectionChanged = true
}
}
childrenCount += getChildrenCount(getRowIdentity(row, rowKey))
})
if (selectionChanged) {
@ -248,10 +252,13 @@ function useWatcher<T>() {
}
let isAllSelected_ = true
let selectedCount = 0
let childrenCount = 0
for (let i = 0, j = (data.value || []).length; i < j; i++) {
const keyProp = instance?.store?.states?.rowKey.value
const rowIndex = i + childrenCount
const item = data.value[i]
const isRowSelectable =
selectable.value && selectable.value.call(null, item, i)
selectable.value && selectable.value.call(null, item, rowIndex)
if (!isSelected(item)) {
if (!selectable.value || isRowSelectable) {
isAllSelected_ = false
@ -260,12 +267,30 @@ function useWatcher<T>() {
} else {
selectedCount++
}
childrenCount += getChildrenCount(getRowIdentity(item, keyProp))
}
if (selectedCount === 0) isAllSelected_ = false
isAllSelected.value = isAllSelected_
}
// gets the number of all child nodes by rowKey
const getChildrenCount = (rowKey: string) => {
if (!instance || !instance.store) return 0
const {
treeData,
} = instance.store.states
let count = 0
const children = treeData.value[rowKey]?.children
if (children) {
count += children.length
children.forEach(childKey => {
count += getChildrenCount(childKey)
})
}
return count
}
// 过滤与排序
const updateFilters = (columns, values) => {
if (!Array.isArray(columns)) {