1
0
mirror of https://github.com/PanJiaChen/vue-element-admin.git synced 2026-07-15 21:31:11 +08:00

fix(complex-table): 修复表格多选功能并优化选择状态管理

添加表格引用和row-key属性以支持多选功能
使用selectedMap对象维护跨页选择状态
实现clearSelection方法清除选择状态
修改handleSelectionChange处理跨页选择逻辑
更新删除操作同步维护选择状态
This commit is contained in:
tyro880 2026-04-18 18:18:26 +08:00
parent 40e466b146
commit 970ec1710e

View File

@ -48,6 +48,7 @@
</div> </div>
<el-table <el-table
ref="multipleTable"
:key="tableKey" :key="tableKey"
v-loading="listLoading" v-loading="listLoading"
:data="list" :data="list"
@ -55,10 +56,11 @@
fit fit
highlight-current-row highlight-current-row
style="width: 100%;" style="width: 100%;"
row-key="id"
@sort-change="sortChange" @sort-change="sortChange"
@selection-change="handleSelectionChange" @selection-change="handleSelectionChange"
> >
<el-table-column type="selection" width="55" align="center" /> <el-table-column type="selection" width="55" align="center" :reserve-selection="true" />
<el-table-column label="ID" prop="id" sortable="custom" align="center" width="80" :class-name="getSortClass('id')"> <el-table-column label="ID" prop="id" sortable="custom" align="center" width="80" :class-name="getSortClass('id')">
<template slot-scope="{row}"> <template slot-scope="{row}">
<span>{{ row.id }}</span> <span>{{ row.id }}</span>
@ -249,6 +251,7 @@ export default {
}, },
downloadLoading: false, downloadLoading: false,
selectedList: [], selectedList: [],
selectedMap: {},
batchExportLoading: false batchExportLoading: false
} }
}, },
@ -269,9 +272,17 @@ export default {
}) })
}, },
handleFilter() { handleFilter() {
this.clearSelection()
this.listQuery.page = 1 this.listQuery.page = 1
this.getList() this.getList()
}, },
clearSelection() {
if (this.$refs.multipleTable) {
this.$refs.multipleTable.clearSelection()
}
this.selectedMap = {}
this.selectedList = []
},
handleModifyStatus(row, status) { handleModifyStatus(row, status) {
this.$message({ this.$message({
message: '操作Success', message: '操作Success',
@ -367,6 +378,8 @@ export default {
}) })
this.list.splice(index, 1) this.list.splice(index, 1)
this.total = Math.max(0, this.total - 1) this.total = Math.max(0, this.total - 1)
delete this.selectedMap[row.id]
this.selectedList = Object.values(this.selectedMap)
}, },
handleFetchPv(pv) { handleFetchPv(pv) {
fetchPv(pv).then(response => { fetchPv(pv).then(response => {
@ -422,7 +435,19 @@ export default {
return sort === `+${key}` ? 'ascending' : 'descending' return sort === `+${key}` ? 'ascending' : 'descending'
}, },
handleSelectionChange(selection) { handleSelectionChange(selection) {
this.selectedList = selection if (!this.list || this.list.length === 0) return
const currentPageIds = this.list.map(item => item.id)
for (const id of currentPageIds) {
delete this.selectedMap[id]
}
for (const row of selection) {
this.selectedMap[row.id] = row
}
this.selectedList = Object.values(this.selectedMap)
}, },
handleBatchDelete() { handleBatchDelete() {
if (this.selectedList.length === 0) { if (this.selectedList.length === 0) {
@ -443,7 +468,16 @@ export default {
const newList = this.list.filter(item => !ids.includes(item.id)) const newList = this.list.filter(item => !ids.includes(item.id))
this.list = newList this.list = newList
this.total = Math.max(0, this.total - ids.length) this.total = Math.max(0, this.total - ids.length)
this.selectedList = []
for (const id of ids) {
delete this.selectedMap[id]
}
this.selectedList = Object.values(this.selectedMap)
if (this.$refs.multipleTable) {
this.$refs.multipleTable.clearSelection()
}
this.$notify({ this.$notify({
title: 'Success', title: 'Success',
message: `成功删除 ${ids.length} 条记录`, message: `成功删除 ${ids.length} 条记录`,