vue3+element-plus实现表格多选功能（可以清除选项或分页保留选项）_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