boostrapTable 表头双行字体并颜色不一致

本是古典何须时尚 2022-12-04 14:58 107阅读 0赞

![设计图][20200908101558105.png_pic_center]  
这是我的设计图的样式,在表格里面存在两个表头,并且在第一个表头里面有不同颜色的字体存在,  
然后我看了一下boostrapTable的文档

> 如果设置的样式是表头里所有的属性都是一样的话可以使用 headerStyle (跟columns同级)  
> 但是我这个是每几个之间就有区别所以不能这样用,于是我就试了一下我下面这个操作没想到这样子就可以了,达到了我需要的效果

### html部分 ###

### js部分 ###

$('#Table').bootstrapTable({ 
 
 columns: [
 [
 { 
 field: 'id',
 title: '总计 162m³',
 align:"center",
 }, { 
 field: 'name',
 title: '总计指标450 ',
 align:"center",
 colspan: 2
 }, { 
 field: 'price',
 title: '与指标对比差值- 288',
 colspan: 2,
 align:"center",
 }, { 
 field: 'price',
 title: '与指标对比百分值36%',
 colspan: 2,
 align:"center",
 },{ 
 field: 'price',
 title: '上期总计205',
 align:"center",
 },{ 
 field: 'price',
 title: '环比-21%',
 align:"center",
 }
 
 
 ],
 [
 { 
 field: 'id',
 title: '房间号'
 }, { 
 field: 'name',
 title: '类型'
 }, { 
 field: 'price',
 title: '单位'
 }, { 
 field: 'price',
 title: 'XX'
 }, { 
 field: 'price',
 title: '指标'
 }, { 
 field: 'price',
 title: '与指标对比 差值'
 }, { 
 field: 'price',
 title: '与指标对比 百分值'
 },{ 
 field: 'price',
 title: '上期'
 },{ 
 field: 'price',
 title: '环比'
 }
 ]
 ],
 data: [{ 
 id: 1,
 name: 'Item 1',
 price: '$1'
 }, { 
 id: 2,
 name: 'Item 2',
 price: '$2'
 }]
 })

效果图如下  
![效果图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqeTE3MDMxNA_size_16_color_FFFFFF_t_70_pic_center]

[20200908101558105.png_pic_center]: /images/20221123/793e0496559840f5bea7d4d380e6e2d2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqeTE3MDMxNA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/ab76826917b14279b22ac86f108861b8.png