Jeecg-Boot中解决表格行选中样式失效问题

在Jeecg-Boot 3.7.0版本中，开发者在使用BasicTable组件时可能会遇到一个UI显示问题：当选中表格中的某一行时，该行没有显示预期的选中样式（通常是高亮显示）。这个问题会影响用户体验，因为用户无法直观地看到哪些行被选中了。

问题分析

通过查看源码，我们发现这个问题主要源于两个方面的原因：

1. 状态更新时机问题：在useCustomSelection.tsx文件中，选中状态(selectedKeys)的更新没有触发组件的重新渲染，导致样式没有及时应用。

2. 样式判断逻辑缺失：在useTableStyle.ts文件中，缺少对行选中状态的判断逻辑，导致即使状态更新了，也没有为选中的行添加对应的CSS类名。

解决方案

状态更新优化

在useCustomSelection.tsx文件中，我们通过添加一个setTimeout来确保状态更新能够触发组件的重新渲染：

let timer;

// 在状态更新后添加以下代码
clearTimeout(timer);
timer = setTimeout(() => {
  selectedKeys.value = [...selectedKeys.value];
}, 0);

这段代码利用了Vue的响应式系统特性，通过创建一个新的数组引用来强制触发响应式更新。setTimeout的延迟为0确保这个更新会在下一个事件循环中执行，避免可能的性能问题。

样式判断逻辑完善

在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;
  };
  
  // 获取行的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');
}

这段代码首先定义了一个isChecked函数，用于判断当前行是否被选中。它考虑了多种情况：

1. 自动生成key的情况
2. 自定义rowKey的情况
3. 行选择器的各种配置

然后根据判断结果，为选中的行添加ant-table-row-selected类名，这个类名是Ant Design表格组件默认的选中行样式类。

实现原理

这个修复方案基于以下技术原理：

1. Vue的响应式系统：通过创建新的数组引用(selectedKeys.value = [...selectedKeys.value])来触发组件的重新渲染。

2. Ant Design的样式机制：Ant Design表格组件通过ant-table-row-selected类名来控制选中行的样式表现。

3. 事件循环机制：使用setTimeout确保状态更新在合适的时机执行，避免可能的渲染性能问题。

总结

通过这两个方面的修改，我们确保了：

1. 当用户选中行时，状态能够正确更新并触发组件重新渲染
2. 渲染时能够正确判断行的选中状态并应用对应的样式类

这个修复方案已经在Jeecg-Boot的后续版本中合并，开发者可以通过更新到最新版本或者按照上述方案手动修改本地代码来解决这个问题。对于使用Jeecg-Boot进行开发的开发者来说，理解这个问题的解决方案也有助于更好地掌握表格组件的使用和自定义扩展。