如何用Bootstrap-vue的b-table通过items和fields实现跨2列表头

要实现你需要的跨2列表头（红色区域）+下方对应2个数据列（黄色区域）的效果，完全可以通过配置fields数组的**多层表头（children属性）**结合自定义表头插槽来实现，无需硬编码布局，完美适配API动态数据。

步骤1：配置fields和items数据 #

在Vue组件的data中定义tableFields时，给需要跨列的表头字段添加children属性，子数组包含对应的数据列字段。Bootstrap-Vue会自动将父表头的colspan设为子字段的数量（这里是2）。

data() {
  return {
    // 表头配置：通过children实现多层表头
    tableFields: [
      // 其他普通字段（根据你的需求添加）
      { key: 'id', label: 'ID' },
      // 跨2列的红色表头
      {
        label: '红色区域表头',
        children: [
          { key: 'col1', label: '黄色区域列1' },
          { key: 'col2', label: '黄色区域列2' }
        ]
      },
      // 其他普通字段（根据你的需求添加）
      { key: 'status', label: '状态' }
    ],
    // 表格数据（可从API接口动态获取）
    tableData: [
      { id: 1, col1: '数据1-1', col2: '数据1-2', status: '正常' },
      { id: 2, col1: '数据2-1', col2: '数据2-2', status: '异常' },
      { id: 3, col1: '数据3-1', col2: '数据3-2', status: '正常' }
    ]
  }
}

步骤2：自定义表头样式（红色/黄色背景） #

通过b-table的thead-tr插槽，根据表头层级（level）分别设置上层表头（红色）和子列表头（黄色）的样式：

<b-table
  bordered
  responsive
  class="mt-2"
  :fields="tableFields"
  :items="tableData"
>
  <!-- 自定义表头行样式 -->
  <template #thead-tr="props">
    <!-- 最上层表头（跨列的红色区域） -->
    <tr v-if="props.level === 0">
      <th 
        v-for="field in props.fields" 
        :key="field.key" 
        :colspan="field.colspan"
        class="bg-danger text-white"
      >
        {{ field.label }}
      </th>
    </tr>
    <!-- 子列表头（黄色区域） -->
    <tr v-else>
      <th 
        v-for="field in props.fields" 
        :key="field.key"
        class="bg-warning text-dark"
      >
        {{ field.label }}
      </th>
    </tr>
  </template>
</b-table>

关键说明 #

1. 动态适配API：如果接口返回的字段是动态的，只需动态生成tableFields中的children数组即可，比如从API获取子列的字段列表，赋值给对应父字段的children属性。
2. colspan自动计算：当字段包含children时，Bootstrap-Vue会自动将父表头的colspan设为子字段的数量，无需手动设置。
3. 样式自定义：示例中使用Bootstrap内置的bg-danger（红色背景）和bg-warning（黄色背景）类，你也可以替换为自定义CSS类来调整样式。

内容的提问来源于stack exchange，提问作者mad-hin