React-Bootstrap-Table 扩展行与行选择功能深度解析

一、功能概述

在React-Bootstrap-Table组件中，扩展行(Expand Row)功能允许用户点击行展开/折叠以显示更多详细信息，而行选择(Row Selection)功能则提供了复选框选择行的能力。本示例展示了如何将这两种功能结合使用，实现更强大的表格交互体验。

二、核心实现原理

1. 数据结构设计

示例中首先构建了一个模拟数据源products数组，其中包含两种类型的数据项：

• 可扩展行：包含expand属性，该属性是一个数组，存储了要展开显示的子表格数据
• 普通行：不包含expand属性，无法展开

{
  id: 1,
  name: 'Item name 1',
  price: 2100,
  expand: [ 
    { fieldA: 'test1', fieldB: 99, fieldC: 随机数, fieldD: '123eedd0' },
    { fieldA: 'test2', fieldB: 0, fieldC: 0, fieldD: '123eedd0' }
  ]
}

2. 扩展行配置

扩展行功能通过三个关键配置实现：

1. isExpandableRow函数：判断某行是否可展开
2. expandComponent函数：定义展开后显示的内容组件
3. expandColumnOptions：控制扩展列的行为和显示

isExpandableRow(row) {
  return row.id < 3;  // 仅前3行可展开
}

expandComponent(row) {
  return <BSTable data={ row.expand } />;  // 使用子表格显示扩展内容
}

3. 行选择配置

行选择功能通过selectRow对象配置：

const selectRow = {
  mode: 'checkbox',  // 使用复选框模式
  clickToSelect: true,  // 点击行即可选中
  clickToExpand: true  // 点击行即可展开
};

三、高级功能详解

1. 扩展行样式定制

通过options对象可以自定义扩展行的背景色：

const options = {
  expandRowBgColor: 'rgb(242, 255, 163)'  // 浅绿色背景
};

2. 子表格组件设计

示例中创建了一个专门的BSTable组件来显示扩展内容，这是一个独立的表格组件，接收父行中的expand数据作为输入。

3. 交互行为控制

clickToSelect和clickToExpand的组合实现了以下交互逻辑：

• 点击行：同时触发选中和展开/折叠操作
• 点击复选框：仅触发选中操作

四、实际应用建议

1. 性能优化：当扩展内容较复杂时，考虑使用懒加载方式，仅在展开时加载数据
2. 用户体验：为可扩展行添加视觉提示（如箭头图标）
3. 数据设计：扩展数据应与主表数据保持关联性，避免信息过载
4. 响应式设计：确保扩展内容在不同屏幕尺寸下都能良好显示

五、常见问题解决方案

1. 扩展行不显示：

   • 检查isExpandableRow函数返回值是否正确
   • 确认数据中是否包含expand属性

2. 选择与扩展冲突：

   • 调整clickToSelect和clickToExpand的配置
   • 考虑使用expandColumnBeforeSelectColumn调整列顺序

3. 样式不生效：

   • 检查CSS是否被覆盖
   • 确认颜色值格式是否正确

通过合理配置React-Bootstrap-Table的扩展行和行选择功能，开发者可以创建出功能丰富、交互友好的数据表格组件，满足复杂业务场景的需求。