As shown in the figure, in actual development, tables with a large amount of data are basically added with a paging function, and the data requested by each page is exchanged and updated. After the selection effect of the first page jumps to the second page, if there is no Do related processing, the selected item will be cleared, the specific solution is as follows
:row-key="getRowKeys"Add and@selection-change=“handleSelectionChange”click events to the table tags that need to be processed
<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>
- In
selectionthe options column add:reserve-selection=“true” - In
setupadd event
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);
}
- submit data
- To clear the selected options, you only need to call the clearSelection() method that comes with the form
multipleTableRef.value.clearSelection()
So far, even if the page is switched back and forth, the last selection cannot be cleared.
- overall code
<!-- 用户列表 -->
<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>