bootstrapTable通过rowspan/colspan合并单元格

行列数量、名称已经确定

• 入门版本

<!--数据展现部分-->
<table id="table">
</table>
<script>
$("#table").bootstrapTable({
  columns: [
    [
      {'title': '', 'colspan':2},
      {'title': '综合', 'colspan':2}
    ],
    [
      {title: 'col1', colspan: 1},
      {title: 'col2', colspan: 1},
      {title: 'col3', colspan: 1},
      {title: 'col4', colspan: 1}
    ]
  ]
})
</script>

效果图：

注意：
boostraptable添加行列的时候默认是从左到右从上到下且不会自动换行
不同中括号中的内容分布在相邻两行。

• 正常版本

<table id="table">

</table>

<script>
$("#table").bootstrapTable({
  columns: [
    [
      {title: '', colspan:2},
      {title: '综合', colspan:2}
    ],
    [
      {title: 'col1', colspan: 1, rowspan: 2},
      {title: 'col2', colspan: 1, rowspan: 1},
      {title: 'col3', colspan: 1, rowspan: 1},
      {title: 'col4', colspan: 1, rowspan: 1}
    ],
    [
      {title: 'col5'},
      {title: 'col6'},
      {title: 'col7'}
    ]
  ]
})
</script>

效果图：

• 中高级版本

  这个版本是https://www.cnblogs.com/hwaggLee/p/7843100.html上学习到的

<table id="table">
</table>
<!--
注意：halign/align/valign都是调整每一个单元格中title的位置，可以用left/right/top/botton等替换center测试一下效果
-->
<script>
$("#table").bootstrapTable({
             columns:[
                 [
                     {
                         "title": "洗衣机统计表",
                         "halign":"center",
                         "align":"center",
                         "colspan": 5
                     }
                 ],
                 [
                     {
                         field: 'name',
                         title: "功能分组",
                         valign:"middle",
                         align:"center",
                         colspan: 1,
                         rowspan: 2
                     },
                     {
                         title: "美的",
                         valign:"middle",
                         align:"center",
                         colspan: 2,
                         rowspan: 1
                     },
                     {
                         title: "松下",
                         valign:"middle",
                         align:"center",
                         colspan: 2,
                         rowspan: 1
                     }
                 ],
                 [
                     {
                         field: 'mideaNum',
                         title: '数量',
                         valign:"middle",
                         align:"center"
                     },
                     {
                         field: 'mideaPercent',
                         title: '占比',
                         valign:"middle",
                         align:"center"
                     },
                     {
                         field: 'panasonicNum',
                         title: '数量',
                         valign:"middle",
                         align:"center"
                     },
                     {
                         field: 'panasonicPercent',
                         title: '占比',
                         valign:"middle",
                         align:"center"
                     }
                 ]
             ]
         })
</script>

效果图：

大家测试效果的时候可以用一下bootstrapTable官网的在线测试https://live.bootstrap-table.com/
点击上方的run就能出结果了。港真，这个挺好用的