bootstrap table中显示头行结构

最近做项目遇到一个需求，就是在表格中显示头行结构的数据。显示的效果如下：

项目的基本技术选型，vueJS作为前端框架，bootstrap作为主要界面布局。

当时这个需求拿到手，最初我是用两张表来解决的，思路就是，分别循环头表和行表，然后按照正确的顺序渲染到表格中。再根据头行的具体对应关系关联。可是写的时候发现代码量大，而且头行关系不易维护（对应的顺序有可能会在表格中错乱）；并且难以维护。没写一半就放弃了这种写法。尝试了第二种写法。

第二种写法的思路其实很简单，就是先不管头行的关系，因为每一个行肯定都有自己的头信息，只不过相同的头会有不同的行而已。所以，先全部以行信息来显示，如下图：

这样做的好处是可以保证头行结构在表格中显示的正确性，接下来就要用到Jquery强大的功能来调整表格了，废话不多，上代码，（table的代码）：

                           <table class="table table-bordered">
                                    <tr style="background-color: rgba(184,255,231,0.08)">
                                        <th rowspan="2"></th>
                                        <th colspan="7">发票信息</th>
                                        <th colspan="4">开票申请信息</th>
                                    </tr>
                                    <tr style="background-color: rgba(184,255,231,0.08)">
                                        <th>发票编号</th>
                                        <th>发票金额</th>
                                        <th>收款金额</th>
                                        <th>收款时间</th>
                                        <th>发票状态</th>
                                        <th>退回状态</th>
                                        <th>客户名称</th>
                                        <th>开票名称</th>
                                        <th>申请人</th>
                                        <th>申请时间</th>
                                        <th>开票时间</th>
                                    </tr>
                                    <template v-for="(item,index) in test">
                                        <tr v-for="(o,i) in item.receipt"
                                            :id="index+'-'+i" :index="index">
                                            <td>
                                                <template
                                                        v-if="o.backStatus=='可退回'">
                                                    <input type="checkbox">
                                                </template>
                                                <template
                                                        v-if="o.backStatus=='不可退回'">
                                                    <input type="checkbox"
                                                           disabled>
                                                </template>
                                            </td>
                                            <td>{{o.num}}</td>
                                            <td>{{o.money}}</td>
                                            <td>{{o.money2}}</td>
                                            <td>{{o.money2Date}}</td>
                                            <td>{{o.receiptStatus}}</td>
                                            <td>{{o.backStatus}}</td>
                                            <td>{{o.customerName}}</td>
                                            <!--head-->
                                            <td>{{item.name}}</td>
                                            <td>{{item.applyPeople}}</td>
                                            <td>{{item.applyDate}}</td>
                                            <td>{{item.receiptDate}}</td>
                                        </tr>
                                    </template>
                                </table>

js代码：

var mApp = {
        initAll: function () {
            this.initVue();
            this.adjustTable();
        },
        initVue: function () {
            window.vm = new Vue({
                el: '#div-return-app',
                data: {
                    test: [
                        {
                            name: '软件实施费',
                            applyPeople: '张三[1234]',
                            applyDate: '2017-09-09',
                            receiptDate: '2017-09-12',
                            receipt: [{
                                num: '0121020',
                                money: '12121212',
                                money2: '2112121',
                                money2Date: '2017-08-12',
                                receiptStatus: '正常',
                                backStatus: '不可退回',
                                customerName: '下面的都是假的'
                            }]
                        }, {
                            name: '软件实ss施费ss',
                            applyPeople: '张三ww[1234]',
                            applyDate: '2017-09-09',
                            receiptDate: '2017-09-12',
                            receipt: [{
                                num: '0121020',
                                money: '12121212',
                                money2: '2112121',
                                money2Date: '2017-08-12',
                                receiptStatus: '正常',
                                backStatus: '可退回',
                                customerName: '你猜我是什么公司'
                            }, {
                                num: '0121020',
                                money: '12121212',
                                money2: '2112121',
                                money2Date: '2017-08-12',
                                receiptStatus: '正常',
                                backStatus: '不可退回',
                                customerName: '你猜不到我是什么公司'
                            }
                            ]
                        },
                        {
                            name: '软件实施费2',
                            applyPeople: '张三2[1234]',
                            applyDate: '2017-09-092',
                            receiptDate: '2017-09-122',
                            receipt: [{
                                num: '11111111',
                                money: '11111111',
                                money2: '1111111',
                                money2Date: '2017-08-12',
                                receiptStatus: '22正常',
                                backStatus: '不可退回',
                                customerName: '测试公司A'
                            }, {
                                num: '2222222',
                                money: '222222',
                                money2: '2222222',
                                money2Date: '2017-08-12',
                                receiptStatus: '22正常',
                                backStatus: '可退回',
                                customerName: '我是一个正经的测试公司'
                            }, {
                                num: '333333',
                                money: '33333',
                                money2: '333333',
                                money2Date: '2017-08-12',
                                receiptStatus: '22正常',
                                backStatus: '不可退回',
                                customerName: '上面的不是正经的公司'
                            }]
                        }
                    ]
                }
            })
        },
        adjustTable: function () {
            for (var i = 0; i < vm.test.length; i++) {
                var $tr = $('tr[index=' + i + ']');
                var rowspanLen = $tr.length;
                var $height = $tr.find('td:eq(2)').css('height');
                $tr.eq(0).find('td:gt(7)').attr('rowspan', rowspanLen).css('line-height', Number($height.split('px')[0] * rowspanLen) + 'px');
                $tr.not(":eq(0)").find('td:gt(7)').css('display', 'none');
                $('tr:gt(1)').find('td:lt(8)').css('line-height', '35px')
            }
        }
    };
    $(function () {
        mApp.initAll();
    })

主要的思路是：为每一个td绑定一个id，这个id记录着头的索引值和行的索引值，并且以 ‘-’ 连接，这样在获取单元格的时候，就能获取到对应这行的行数据了。这里主要是用来调整表格布局。注意这里要设置行高，因为要保证单元格内的问题居中显示。