第四十四节：封装通用表格多选、批量操作组合式函数

第四十四节：封装通用表格多选、批量操作组合式函数

🎯本节目标

1. 抽离表格多选逻辑，复用在用户、角色、部门等所有列表页面
2. 自动维护选中行数组，获取选中 id 集合，清空选中状态
3. 配合批量删除、批量修改状态等业务，不用每个页面重复写 selection 相关代码

步骤 1：新建 src/composables/useTableSelection.js

import { ref } from 'vue'

export function useTableSelection() {
  // 选中的全部行数据
  const selectedRows = ref([])

  // 多选框选中变化回调
  const handleSelectionChange = (rows) => {
    selectedRows.value = rows
  }

  // 获取选中行的id数组（常用，传给后端批量接口）
  const getSelectedIds = (key = 'id') => {
    return selectedRows.value.map(item => item[key])
  }

  // 清空表格选中
  const clearSelection = (tableRef) => {
    selectedRows.value = []
    if (tableRef?.value) {
      tableRef.value.clearSelection()
    }
  }

  return {
    selectedRows,
    handleSelectionChange,
    getSelectedIds,
    clearSelection
  }
}

步骤 2：用户列表页面引入使用 src/views/system/user/user.vue

<template>
  <PageCard title="用户管理">
    <!-- 搜索区域省略 -->
    <div class="mb-10">
      <el-button v-perm="'system:user:add'" type="primary" @click="openAdd()">新增用户</el-button>
      <el-button v-perm="'system:user:remove'" type="danger" @click="batchDelete">批量删除</el-button>
    </div>

    <el-table
      ref="tableRef"
      :data="tableData"
      @selection-change="handleSelectionChange"
      border
    >
      <!-- 多选列 -->
      <el-table-column type="selection" width="55" />
      <el-table-column label="用户名" prop="username" />
      <el-table-column label="手机号" prop="phone" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button @click="openEdit(scope.row)">编辑</el-button>
          <el-button type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件省略 -->
  </PageCard>
</template>

<script setup>
import { ref } from 'vue'
import { useTableSelection } from '@/composables/useTableSelection'
import { useMsg } from '@/composables/useMsg'
const { msgSuccess, msgWarning, msgConfirm } = useMsg()

const tableRef = ref(null)
const { selectedRows, handleSelectionChange, getSelectedIds, clearSelection } = useTableSelection()

// 批量删除
const batchDelete = async () => {
  const ids = getSelectedIds('id')
  if (ids.length === 0) {
    msgWarning('请勾选至少一条数据')
    return
  }
  try {
    await msgConfirm('批量删除', `确定删除选中${ids.length}条记录吗？`)
    // 调用批量删除接口：await batchDelUserApi({ ids })
    msgSuccess('批量删除成功')
    getList()
    // 删除成功清空表格选中状态
    clearSelection(tableRef)
  } catch (err) {
    console.log('取消批量删除')
  }
}

// 其余原有逻辑：getList、单行删除、新增编辑...
defineOptions({
  name: 'UserList'
})
</script>

✅ 方法说明

1. handleSelectionChange：直接绑定 el-table 的 @selection-change，自动收集勾选的行
2. getSelectedIds('id')：快速拿到选中数据的 id 数组，传给后端批量接口；主键不是 id 可以传其他字段，如getSelectedIds('deptId')
3. clearSelection(tableRef)：清空勾选，分页切换 / 删除成功后调用

✅测试清单

1. 进入用户管理页面，勾选多条数据
2. 点击批量删除，弹窗提示选中条数
3. 确认删除，列表刷新并且多选框自动清空
4. 不勾选任何数据直接点批量删除，弹出警告提示
5. 切换分页，多选状态会清空（element-plus 原生行为，如需跨页保存选中可自行扩展）

常见坑

1. tableRef 必须传递给 clearSelection，否则页面上勾选框不会取消勾选
2. 跨页保留选中是进阶需求，当前版本默认不处理，适合绝大多数后台系统
3. 批量接口后端一般接收数组ids:[1,2,3]，getSelectedIds直接生成