vue3+element-plus实现表格多选功能（可以清除选项或分页保留选项）

如图所示，在实际开发中，数据量大的表格基本都添加上了分页功能，每个页面请求的数据回交换更新，第一页的选中效果在跳转至第二页后，如果没有做相关处理，选中项会被清空，具体解决方法如下

1. 在需要处理的表格标签中加上 :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>

• 1
• 2
• 3
• 4
• 5

2. 在selection选项列中加上:reserve-selection=“true”
3. 在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); }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28

4. 提交数据
5. 清空选择的选项只需要调用表格自带的clearSelection()方法

multipleTableRef.value.clearSelection()

• 1

至此，即使来回切换页面，也无法清除上次选中情况。

6. 整体代码

<!-- 用户列表 --> <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>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71
• 72
• 73
• 74
• 75
• 76
• 77
• 78
• 79
• 80
• 81
• 82
• 83
• 84
• 85
• 86
• 87
• 88
• 89
• 90
• 91
• 92
• 93
• 94
• 95
• 96
• 97
• 98
• 99
• 100
• 101
• 102
• 103
• 104
• 105
• 106
• 107
• 108
• 109
• 110
• 111
• 112
• 113
• 114
• 115
• 116
• 117
• 118
• 119
• 120
• 121
• 122
• 123
• 124
• 125
• 126
• 127
• 128
• 129
• 130
• 131
• 132
• 133
• 134
• 135
• 136
• 137
• 138
• 139
• 140
• 141
• 142
• 143
• 144
• 145
• 146
• 147
• 148
• 149
• 150
• 151
• 152
• 153
• 154
• 155
• 156
• 157
• 158
• 159
• 160
• 161
• 162
• 163
• 164
• 165
• 166
• 167
• 168