React中如何实现BootstrapTable的表头与子表头展示？

你可以通过react-bootstrap-table2（即react-bootstrap-table-next）内置的表头分组功能来实现需求，核心是在列配置中通过columns属性嵌套子列，形成父表头+子表头的结构。

修改后的完整代码 #

<BootstrapTable
  classes="table"
  data={this.props.School}
  columns={[
    {
      text: 'Name', // 父表头：姓名分组
      columns: [
        {
          dataField: 'firstName',
          text: 'First Name',
          sort: false
        },
        {
          dataField: 'lastName',
          text: 'Last Name',
          sort: false
        }
      ]
    },
    {
      text: 'Student Details', // 父表头：学生详情分组
      columns: [
        {
          dataField: 'Id',
          text: 'ID'
        },
        {
          dataField: 'rollNo',
          text: 'Roll Number',
          sort: false
        }
      ]
    }
  ]}
/>

关键说明 #

• 父表头字段不需要设置dataField，只需要text和columns属性，columns数组内是该分组下的子列配置
• 子列的配置保持你原有代码中的dataField、text、sort等属性即可
• 该功能是react-bootstrap-table-next的原生支持，无需额外引入样式（如果需要自定义表头样式，可通过自定义CSS类覆盖）

内容的提问来源于stack exchange，提问作者sunil