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

最新推荐文章于 2025-03-17 15:50:52 发布

KeloOne

最新推荐文章于 2025-03-17 15:50:52 发布

阅读量7.9k

点赞数 6

分类专栏：笔记文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/weixin_46319117/article/details/129320440

版权

笔记专栏收录该内容

13 篇文章

订阅专栏

在Vue.js开发中，为了处理大数据表格，通常会使用分页。文章介绍了如何在分页切换后保持表格选中项的状态，通过设置`row-key`和`reserve-selection`属性，以及监听`selection-change`事件来管理选中行。同时，提供了在切换页面后清除选中状态的方法，即调用`clearSelection()`。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

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

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