如图所示，在实际开发中，数据量大的表格基本都添加上了分页功能，每个页面请求的数据回交换更新，第一页的选中效果在跳转至第二页后，如果没有做相关处理，选中项会被清空，具体解决方法如下
- 在需要处理的表格标签中加上
:row-key="getRowKeys"以及@selection-change=“handleSelectionChange”点击事件
<el-table ref="multipleTableRef" :data="tableData" v-loading="loading" :header-cell-style="{ background: '#F2F3F5' }"
:row-key="getRowKeys" @selection-change="handleSelectionChange" border>
<el-table-column type="selection" :reserve-selection="true"></el-table-column>
<el-table-column prop="id" label="用户id" width="200"></el-table-column>
</el-table>
- 在
selection选项列中加上:reserve-selection=“true” - 在
setup添加事件
const multipleTableRef = ref()
const select_order_number = ref('') //表格select选中的条数
const select_orderId = ref([]) //表格select复选框选中的id
const multipleSelection = ref([])
//选中的list
const getRowKeys = (row) => {
//记录每行的key值
return row.id;
}
//当表格选择项发生变化时会触发该事件
const handleSelectionChange = (val) => {
// 解决来回切换页面，也无法清除上次选中情况
multipleSelection.value = val;
select_order_number.value = multipleSelection.value.length;
select_orderId.value = [];
if (val) {
undefined;
val.forEach((row) => {
undefined;
if (row) {
undefined;
select_orderId.value.push(row.id);
}
});
}
console.log(select_orderId.value);
}
- 提交数据
- 清空选择的选项只需要调用表格自带的clearSelection()方法
multipleTableRef.value.clearSelection()
至此，即使来回切换页面，也无法清除上次选中情况。
- 整体代码
<!-- 用户列表 -->
<template>
<div class="header">
<el-form :inline="true" :model="queryInfo" label-position="right" label-width="auto">
<el-form-item label="用户组" label-width="80px">
<el-select @change="groupChange" size="medium" filterable v-model="queryInfo.groupId" placeholder="" clearable>
<el-option v-for="(item, index) in groupData" :key="index" :label="item.groupName" :value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="分组状态" label-width="80px">
<el-select size="medium" @change="groupChange" filterable v-model="queryInfo.isGroup" placeholder="" clearable>
<el-option label="已分组" value="1"> </el-option>
<el-option label="未分组" value="0"> </el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleSearch" style="margin-left: 20px">查询</el-button>
<el-button type="primary" plain @click="groupBtn">新增用户分组</el-button>
<el-button type="primary" plain @click="deleteUser" style="margin-left: 20px">移除用户分组</el-button>
</el-form-item>
</el-form>
</div>
<el-table ref="multipleTableRef" :data="tableData" v-loading="loading" :header-cell-style="{ background: '#F2F3F5' }"
:row-key="getRowKeys" @selection-change="handleSelectionChange" border>
<el-table-column type="selection" :reserve-selection="true"></el-table-column>
<el-table-column prop="id" label="用户id" width="200"></el-table-column>
<el-table-column prop="nickName" label="用户昵称" min-width="150"></el-table-column>
</el-table>
</template>
<script>
import {
ref, reactive, onMounted } from 'vue'
import {
ElMessageBox, ElMessage } from 'element-plus'
export default {
name: 'user-list',
components: {
userAudit,
},
setup(props, ctx) {
const userAuditDialogVisible = ref(false)
const invoiceVisible = ref(false)
const {
id,
allGroups,
deleteUserGroup
} = useUserList()
const queryInfo = reactive({
id: '',
userName: '',
userPhone: '',
isGroup: ''
})
// 用户分组
const rules = reactive({
groupId: [{
message: '请选择',
trigger: ['blur', 'change'],
required: true
}]
})
const groupDialog = ref(false)
const groupList = reactive({
groupId: ''
})
const multipleTableRef = ref()
const select_order_number = ref('') //表格select选中的条数
const select_orderId = ref([]) //表格select复选框选中的id
const multipleSelection = ref([])
const formRef = ref()
const groupTitle = ref('用户分组')
// 新增用户分组
const groupBtn = () => {
if (queryInfo.groupId) {
if (select_orderId.value && select_orderId.value.length > 0) {
addUserGroup({
userIdList: select_orderId.value,
groupId: queryInfo.groupId
})
multipleTableRef.value.clearSelection()
handleSearch()
} else {
ElMessage.warning('请选择需要添加的用户！')
}
} else {
ElMessage.warning('请选择用户组！')
}
}
//选中的list
const getRowKeys = (row) => {
//记录每行的key值
return row.id;
}
//当表格选择项发生变化时会触发该事件
const handleSelectionChange = (val) => {
// 解决来回切换页面，也无法清除上次选中情况
multipleSelection.value = val;
select_order_number.value = multipleSelection.value.length;
select_orderId.value = [];
if (val) {
undefined;
val.forEach((row) => {
undefined;
if (row) {
undefined;
select_orderId.value.push(row.id);
}
});
}
console.log(select_orderId.value);
}
// 移除用户分组
const deleteUser = () => {
if (queryInfo.groupId) {
if (select_orderId.value && select_orderId.value.length > 0) {
deleteUserGroup({
userIdList: select_orderId.value,
groupId: queryInfo.groupId
})
multipleTableRef.value.clearSelection()
handleSearch()
} else {
ElMessage.warning('请选择需要移除的用户！')
}
} else {
ElMessage.warning('请选择用户组！')
}
}
// 分组用户添加 提交
const submitForm = () => {
formRef.value.validate(valid => {
if (valid) {
addUserGroup({
userIdList: select_orderId.value,
groupId: groupList.groupId
})
multipleTableRef.value.clearSelection()
groupDialog.value = false
}
})
}
// 批量分组
const groupNumsBtn = () => {
groupDialog.value = true
}
onMounted(() => {
getGroupAll()
})
return {
invoiceVisible,
groupBtn,
groupDialog,
groupList,
getRowKeys,
handleSelectionChange,
groupData,
deleteUser,
submitForm,
rules,
formRef,
groupChange,
multipleTableRef,
groupNumsBtn
}
},
}
</script>