diff --git a/src/components/Table/DataTable/compenents/el-data-table/el-data-table.vue b/src/components/Table/DataTable/compenents/el-data-table/el-data-table.vue index eead98412..8ec17a277 100644 --- a/src/components/Table/DataTable/compenents/el-data-table/el-data-table.vue +++ b/src/components/Table/DataTable/compenents/el-data-table/el-data-table.vue @@ -14,7 +14,7 @@ @select="selectStrategy.onSelect" v-on="$listeners" @selection-change="selectStrategy.onSelectionChange" - @select-all="selectStrategy.onSelectAll($event, canSelect)" + @select-all="handleSelectAll($event, canSelect)" @sort-change="onSortChange" > @@ -1106,6 +1106,12 @@ export default { this.page = val this.getList() }, + handleSelectAll(e, canSelect) { + this.loading = true + this.selectStrategy.onSelectAll(e, canSelect, () => { + this.loading = false + }) + }, /** * 切换某一行的选中状态,如果使用了第二个参数,则是设置这一行选中与否 * diff --git a/src/components/Table/DataTable/compenents/el-data-table/utils/select-strategy.js b/src/components/Table/DataTable/compenents/el-data-table/utils/select-strategy.js index 6bf7c0e59..d580c599e 100644 --- a/src/components/Table/DataTable/compenents/el-data-table/utils/select-strategy.js +++ b/src/components/Table/DataTable/compenents/el-data-table/utils/select-strategy.js @@ -71,22 +71,40 @@ class StrategyPersistSelection extends StrategyAbstract { /** * 用户切换当前页的多选 */ - onSelectAll(selection, selectable = () => true) { + onSelectAll(selection, selectable = () => true, callback) { + const { id, selected, data } = this.elDataTable + + const selectedIds = new Set(selected.map(r => r[id])) + // 获取当前所有已选择的项 const selectedRows = this.elDataTable.data.filter(r => selection.includes(r)) // 判断是否已全选 const isSelected = this.elDataTable.data.every(r => selectable(r) && selectedRows.includes(r)) - this.elDataTable.data.forEach(r => { + data.forEach(r => { if (selectable(r)) { - this.toggleRowSelection(r, isSelected) + const isRowSelected = selectedIds.has(r[id]) + + if (isSelected && !isRowSelected) { + selected.push(r) + this.elDataTable.toggleRowSelection(r, true) + } else if (!isSelected && isRowSelected) { + const index = selected.findIndex(item => item[id] === r[id]) + + if (index !== -1) { + selected.splice(index, 1) + this.elDataTable.toggleRowSelection(r, false) + } + } } }) + + callback() } /** - * toggleRowSelection和clearSelection管理elDataTable的selected数组 - * 记得最后要将状态同步到el-table中 + * toggleRowSelection 和 clearSelection 管理 elDataTable 的 selected 数组 + * 记得最后要将状态同步到 el-table 中 */ toggleRowSelection(row, isSelected) { const { id, selected } = this.elDataTable