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

「爱情、让人受尽委屈。」 2024-03-26 17:07 36阅读 0赞

![在这里插入图片描述][f0ac22ebff664a4f853e243fa8243248.png]

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

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`添加事件

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'
    
    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>

[f0ac22ebff664a4f853e243fa8243248.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/59c676b207b04627a570d550d477e696.png