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. 在selection选项列中加上:reserve-selection=“true”
2. 在setup添加事件

const multipleTableRef =ref()const select_order_number =ref('')//表格select选中的条数const select_orderId =ref([])//表格select复选框选中的idconst multipleSelection =ref([])//选中的listconstgetRowKeys=(row)=>{//记录每行的key值return row.id;}//当表格选择项发生变化时会触发该事件consthandleSelectionChange=(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. 清空选择的选项只需要调用表格自带的clearSelection()方法

    multipleTableRef.value.clearSelection()

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

1. 整体代码

<!-- 用户列表 --><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'exportdefault{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复选框选中的idconst multipleSelection =ref([])const formRef =ref()const groupTitle =ref('用户分组')// 新增用户分组constgroupBtn=()=>{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('请选择用户组！')}}//选中的listconstgetRowKeys=(row)=>{//记录每行的key值return row.id;}//当表格选择项发生变化时会触发该事件consthandleSelectionChange=(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);}// 移除用户分组constdeleteUser=()=>{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('请选择用户组！')}}// 分组用户添加 提交constsubmitForm=()=>{
      formRef.value.validate(valid=>{if(valid){addUserGroup({userIdList: select_orderId.value,groupId: groupList.groupId
          })
          multipleTableRef.value.clearSelection()
          groupDialog.value =false}})}// 批量分组constgroupNumsBtn=()=>{
      groupDialog.value =true}onMounted(()=>{getGroupAll()})return{
      invoiceVisible,
      groupBtn,
      groupDialog,
      groupList,
      getRowKeys,
      handleSelectionChange,
      groupData,
      deleteUser,
      submitForm,
      rules,
      formRef,
      groupChange,
      multipleTableRef,
      groupNumsBtn
    }},}</script>