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:
parent
40e466b146
commit
970ec1710e
@ -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} 条记录`,
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user