Vue3+Element Plus实现表格行选择控制

1. 项目概述

在Vue3项目中使用Element Plus的el-table组件时，我们经常会遇到需要控制表格行选择状态的场景。比如在一个用户管理系统中，已禁用的用户行不允许被选中；或者在一个订单表格里，已完成订单不可取消选择。这种部分行禁止勾选的需求在实际业务中非常常见。

原生el-table虽然提供了选择功能，但默认情况下所有行都是可选的。要实现部分行禁选的效果，我们需要深入理解el-table的选择机制，并合理利用其提供的API。本文将详细介绍如何通过selectable回调函数实现这一功能，并分享一些实际开发中的经验技巧。

2. 核心实现原理

2.1 el-table的选择机制解析

el-table的选择功能是通过type="selection"的列来实现的。当我们在列定义中添加这个属性时，表格会自动在每行前面添加一个复选框。这个复选框的显示和交互行为可以通过几个关键属性来控制：

1. selectable：一个函数类型的prop，接受row和index参数，返回布尔值决定该行是否可选
2. reserve-selection：布尔值，控制在数据更新时是否保留之前的选择状态
3. selection-change：事件，当选择状态变化时触发

其中selectable是实现部分行禁选的关键。它会在渲染每一行的选择框时被调用，我们可以在这个函数中根据业务逻辑决定当前行是否可选。

2.2 selectable回调函数详解

selectable函数的完整签名是：

javascript复制function selectable(row: object, index: number): boolean

参数说明：

• row：当前行的数据对象
• index：当前行的索引（从0开始）

返回值：

• true：表示该行可选
• false：表示该行不可选（复选框会被禁用）

在我们的示例中，判断逻辑非常简单：

javascript复制const checkCanSelect = (row, index) => {
  return row.status === 1
}

这表示只有当行的status属性值为1时，该行才允许被选中。其他情况下，选择框会显示为禁用状态。

3. 完整实现步骤

3.1 基础表格配置

首先，我们需要设置一个基本的el-table，包含选择列和其他业务列：

html复制<el-table
  ref="tableRef"
  :data="tableData"
  border
  stripe
  style="width: 100%;"
  @selection-change="handleSelectionChange"
>
  <!-- 选择列：核心配置selectable回调 -->
  <el-table-column
    type="selection"
    width="55"
    :selectable="checkCanSelect"
  />
  <el-table-column prop="id" label="ID" width="80" align="center" />
  <el-table-column prop="name" label="名称" align="center" />
  <el-table-column prop="status" label="状态" align="center">
    <!-- 状态格式化显示 -->
    <template #default="scope">
      <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
        {{ scope.row.status === 1 ? '正常（可选中）' : '禁用（不可选）' }}
      </el-tag>
    </template>
  </el-table-column>
</el-table>

3.2 数据准备

表格数据通常来自API请求，这里我们模拟一些测试数据：

javascript复制const tableData = ref([
  { id: 1, name: '用户A', status: 1 },
  { id: 2, name: '用户B', status: 0 },
  { id: 3, name: '用户C', status: 1 },
  { id: 4, name: '用户D', status: 0 },
  { id: 5, name: '用户E', status: 1 }
])

3.3 选择状态处理

当用户选择行时，我们需要处理selection-change事件：

javascript复制const selectedRows = ref([])

const handleSelectionChange = (selection) => {
  selectedRows.value = selection
  console.log('当前选中行:', selection)
}

4. 高级应用与技巧

4.1 动态更新选择状态

有时候我们需要在程序运行时动态改变行的可选状态。这时需要注意，直接修改数据后，el-table不会自动重新计算选择状态。我们需要手动调用clearSelection和toggleRowSelection方法：

javascript复制// 假设我们要动态改变某行的可选状态
const updateRowSelectable = (rowId, newStatus) => {
  // 更新数据
  const row = tableData.value.find(item => item.id === rowId)
  if (row) {
    row.status = newStatus
    
    // 强制表格重新渲染选择状态
    nextTick(() => {
      const table = tableRef.value
      table.clearSelection()
      tableData.value.forEach(row => {
        if (row.status === 1) {
          table.toggleRowSelection(row, true)
        }
      })
    })
  }
}

4.2 复杂选择条件

selectable回调不仅限于简单的属性判断，我们可以实现更复杂的业务逻辑：

javascript复制const checkCanSelect = (row, index) => {
  // 多条件判断
  return row.status === 1 && 
         row.role !== 'admin' && 
         !row.isLocked &&
         new Date(row.expireDate) > new Date()
}

4.3 样式自定义

对于禁用的选择框，我们可以通过CSS自定义其外观：

css复制.el-table .el-checkbox__input.is-disabled .el-checkbox__inner {
  background-color: #f5f7fa;
  border-color: #e4e7ed;
}

.el-table .el-checkbox__input.is-disabled + span.el-checkbox__label {
  color: #c0c4cc;
}

5. 常见问题与解决方案

5.1 选择状态不更新

问题描述：修改了数据中的状态字段后，选择框的禁用状态没有立即更新。

解决方案：

1. 确保使用响应式数据（ref或reactive）
2. 在数据更新后调用nextTick确保DOM更新
3. 必要时手动调用clearSelection和toggleRowSelection

javascript复制const changeStatus = (rowId) => {
  const row = tableData.value.find(item => item.id === rowId)
  if (row) {
    row.status = row.status === 1 ? 0 : 1
    nextTick(() => {
      tableRef.value.clearSelection()
    })
  }
}

5.2 全选按钮的处理

问题描述：点击表头的全选按钮时，禁用的行也会被选中。

解决方案：监听header-selection-change事件，手动过滤掉不可选的行：

html复制<el-table @header-selection-change="handleHeaderSelectionChange">

javascript复制const handleHeaderSelectionChange = (selected) => {
  if (selected) {
    const table = tableRef.value
    table.clearSelection()
    tableData.value.forEach(row => {
      if (row.status === 1) {
        table.toggleRowSelection(row, true)
      }
    })
  } else {
    tableRef.value.clearSelection()
  }
}

5.3 性能优化

问题描述：当表格数据量很大时，selectable函数频繁调用可能影响性能。

优化方案：

1. 避免在selectable中执行复杂计算
2. 对于静态的禁用条件，可以预先计算并存储在数据中
3. 使用debounce减少频繁更新

javascript复制// 预先计算并缓存可选状态
tableData.value = tableData.value.map(item => ({
  ...item,
  _selectable: item.status === 1 && item.role !== 'admin'
}))

const checkCanSelect = (row) => row._selectable

6. 实际应用案例

6.1 用户管理系统

在一个用户管理系统中，我们可能需要对不同状态的用户进行批量操作：

javascript复制const checkCanSelect = (row) => {
  // 只有活跃用户且未被锁定的用户可以选中
  return row.status === 'active' && !row.isLocked
}

6.2 订单批量处理

在订单管理系统中，我们可能只允许选择特定状态的订单：

javascript复制const checkCanSelect = (row) => {
  // 只允许选择待支付和待发货的订单
  return ['pending_payment', 'pending_shipment'].includes(row.orderStatus)
}

6.3 权限控制

结合用户权限，实现动态的行选择控制：

javascript复制const userRole = ref('editor')

const checkCanSelect = (row) => {
  if (userRole.value === 'admin') {
    return true // 管理员可以选择所有行
  } else if (userRole.value === 'editor') {
    return row.createdBy === currentUserId // 编辑只能选择自己创建的行
  }
  return false
}

7. 扩展思考

7.1 与分页的配合

当表格使用分页时，需要注意跨页保持选择状态的问题。Element Plus提供了reserve-selection属性来解决这个问题：

html复制<el-table-column
  type="selection"
  :reserve-selection="true"
  :selectable="checkCanSelect"
/>

7.2 与树形表格的配合

在树形表格中，selectable同样适用，但需要注意父子节点的联动关系。可以通过设置select-on-indeterminate属性来控制：

html复制<el-table
  :data="tableData"
  row-key="id"
  :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
>
  <el-table-column
    type="selection"
    :selectable="checkCanSelect"
    :select-on-indeterminate="false"
  />
</el-table>

7.3 替代方案比较

除了使用selectable回调，还有其他几种实现部分行禁选的方法：

1. 动态移除选择列：通过v-if完全移除不可选行的选择列

   • 优点：完全隐藏选择控件
   • 缺点：无法保持表格列宽一致，视觉上不整齐

2. 禁用点击事件：通过阻止mousedown事件

   • 优点：实现简单
   • 缺点：不够语义化，可能影响可访问性

3. 自定义选择列：不使用type="selection"，完全自己实现选择逻辑

   • 优点：完全控制选择行为
   • 缺点：实现复杂，需要处理各种边缘情况

相比之下，selectable回调是官方推荐的方式，在功能和可维护性上取得了很好的平衡。