Vue.js如何为表格选中行动态添加isActive类

1. 调整响应式状态定义 #

把原来存储选中状态的变量改为存储当前选中行的员工ID，初始值设为null即可，Vue2选项式写法示例：

data() {
  return {
    // 保留其他原有状态
    selectedEmployeeId: null // 可直接替换原有rowSelected变量，也可新增
  }
}

如果需要支持多选，可将该变量定义为空数组。

2. 修改tr标签的类绑定逻辑 #

替换原来的:class绑定，判断当前遍历的员工ID是否等于选中的ID，满足条件就添加isActive类：

<tbody>
  <tr
    v-for="employee in employees"
    :key="employee.EmployeeId"
    @dblclick="rowOnDblClick(employee.EmployeeId)"
    @click="rowOnClick(employee.EmployeeId)"
    :class="{
      rowSelected: rowSelected.status, // 原有逻辑可按需保留
      isActive: selectedEmployeeId === employee.EmployeeId // 新增选中类判断
    }"
  >
    <!-- 原有td内容保持不变 -->
    <td>{{employee.EmployeeCode}}</td>
    <td>{{employee.FullName}}</td>
    <td>{{employee.GenderName}}</td>
    <td style="text-align: center;">{{employee.DateOfBirth|dateofbirth}}</td>
    <td>{{employee.PhoneNumber}}</td>
    <td :title="employee.Email">{{employee.Email}}</td>
    <td>{{employee.PositionName}}</td>
    <td>{{employee.DepartmentName}}</td>
    <td style="text-align: right;">{{employee.Salary|money}}</td>
    <td>{{employee.WorkStatus|status}}</td>
  </tr>
</tbody>

多选场景下类绑定改为isActive: selectedEmployeeId.includes(employee.EmployeeId)即可。

3. 修改点击行的事件处理逻辑 #

在rowOnClick方法里更新选中的ID，如果需要支持点击已选中行取消选中，可额外加判断：

methods: {
  rowOnClick(employeeId) {
    // 单选支持取消选中的写法
    this.selectedEmployeeId = this.selectedEmployeeId === employeeId ? null : employeeId
    // 不需要取消直接赋值即可：this.selectedEmployeeId = employeeId
    // 多选写法：
    // const index = this.selectedEmployeeId.indexOf(employeeId)
    // index > -1 ? this.selectedEmployeeId.splice(index, 1) : this.selectedEmployeeId.push(employeeId)
    // 原有其他业务逻辑保留
  },
  // 其他原有方法保持不变
}

内容的提问来源于stack exchange，提问作者Viet Quang Fresher