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

问题背景

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

问题分析

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

1. useCustomSelection.tsx：负责处理表格的选择逻辑
2. useTableStyle.ts：负责处理表格的样式逻辑

问题的根本原因在于：

1. 选中状态更新后，没有及时触发视图的重新渲染
2. 样式判断逻辑中缺少对选中状态的准确检测

解决方案

1. 强制触发重新渲染

在useCustomSelection.tsx文件中，我们添加了一个定时器逻辑来强制更新选中状态：

let timer;

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

这段代码通过创建一个新的数组引用来触发Vue的响应式更新机制，确保选中状态的变更能够反映到视图中。

2. 完善样式判断逻辑

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

const isChecked = (propsRef, record) => {
  const getAutoCreateKey = () => {
    return unref(propsRef).autoCreateKey && !unref(propsRef).rowKey;
  };
  
  const getRowKey = () => {
    const { rowKey } = unref(propsRef);
    return getAutoCreateKey() ? ROW_KEY : rowKey;
  };
  
  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的响应式系统依赖于数据的变更来触发视图更新。当我们直接修改数组内容而不改变数组引用时，Vue可能无法检测到变化。通过创建新数组，我们确保了变更能被正确检测。

2. 样式应用：Ant Design的表格组件使用ant-table-row-selected类来标记选中的行。我们需要准确判断当前行是否被选中，然后应用这个类。

3. 键值处理：表格行的唯一标识可能来自不同来源（自定义rowKey、自动生成的key等），我们需要统一处理这些情况来正确匹配选中状态。

最佳实践

1. 在处理类似状态更新问题时，可以考虑使用强制刷新的方式确保视图更新
2. 对于复杂的条件判断，建议提取为独立函数提高代码可读性
3. 在样式处理中，应该充分考虑各种边界情况，确保逻辑的完备性

总结

通过分析JeecgBoot项目中表格行选中样式失效的问题，我们不仅解决了具体的bug，还深入理解了Vue响应式系统和Ant Design表格组件的工作原理。这种问题在开发中比较常见，掌握其解决方法有助于提高开发效率和代码质量。