JeecgBoot项目中表格行选中样式失效问题分析与解决方案

问题背景

在JeecgBoot项目3.7.0版本中，用户反馈了一个关于表格组件的问题：当选中表格中的某一行时，该行没有显示应有的选中样式。这个问题影响了用户体验，因为用户无法直观地看到当前选中的行。

问题分析

通过查看项目代码，我们发现这个问题主要涉及两个关键文件：

1. useCustomSelection.tsx - 处理表格选择逻辑的自定义Hook
2. useTableStyle.ts - 处理表格样式的自定义Hook

问题的根本原因在于：

• 选中状态更新后，没有及时触发视图重新渲染
• 表格行选中样式的判断逻辑不够完善

解决方案

1. 状态更新优化

在useCustomSelection.tsx文件中，我们添加了定时器逻辑来确保状态更新后视图能够正确渲染：

let timer;

// 在选中状态更新后
clearTimeout(timer);
timer = setTimeout(() => {
  selectedKeys.value = [...selectedKeys.value];
}, 0);

这段代码通过以下方式解决问题：

• 使用setTimeout将状态更新放入下一个事件循环
• 创建新的数组引用强制触发响应式更新
• clearTimeout确保不会产生多个未执行的更新

2. 样式判断逻辑完善

在useTableStyle.ts文件中，我们添加了完整的选中状态判断逻辑：

const isChecked = (propsRef, record) => {
  // 获取自动创建key的配置
  const getAutoCreateKey = () => {
    return unref(propsRef).autoCreateKey && !unref(propsRef).rowKey;
  };
  
  // 获取行key配置
  const getRowKey = () => {
    const { rowKey } = unref(propsRef);
    return getAutoCreateKey() ? ROW_KEY : rowKey;
  };
  
  // 获取记录的实际key值
  const getRecordKey = (record) => {
    const key = getRowKey();
    if (!key) {
      return record[ROW_KEY];
    } else if (isFunction(key)) {
      return key(record);
    } else {
      return record[key];
    }
  };
  
  // 检查当前记录是否在选中列表中
  const { rowSelection } = unref(propsRef);
  if (rowSelection?.selectedRowKeys?.length) {
    return rowSelection.selectedRowKeys.includes(getRecordKey(record));
  }
  return false;
};

然后在表格行样式中应用这个判断：

if (isChecked(propsRef, record)) {
  classNames.push('ant-table-row-selected');
}

技术原理

1. 响应式更新机制：Vue的响应式系统需要检测到状态值的实际变化才会触发更新。直接修改数组内容而不改变引用可能不会触发更新。

2. 事件循环与渲染：将状态更新放入setTimeout可以确保DOM更新发生在当前渲染周期之后，避免可能的渲染冲突。

3. 表格行选中逻辑：完整的选中判断需要考虑多种情况：

   • 自定义行key
   • 自动生成key
   • 函数形式的key生成器
   • 默认key处理

最佳实践

对于类似问题的处理，建议：

1. 当遇到状态更新但视图不更新的问题时，可以尝试：

   • 确保修改的是响应式对象的属性
   • 对于数组/对象，创建新引用而非直接修改
   • 使用nextTick或setTimeout确保更新时机

2. 对于表格组件的开发：

   • 完善行key的处理逻辑
   • 考虑各种配置情况下的兼容性
   • 确保样式与状态同步

3. 性能优化：

   • 避免不必要的重新渲染
   • 合理使用防抖/节流
   • 复杂计算使用缓存

总结

JeecgBoot中的这个表格选中样式问题展示了前端开发中状态管理与视图同步的典型挑战。通过分析问题根源并实施针对性的解决方案，我们不仅修复了当前问题，也为类似场景提供了参考模式。理解Vue的响应式原理和渲染机制对于解决这类问题至关重要。