最近做项目遇到一个需求，就是在表格中显示头行结构的数据。显示的效果如下：
项目的基本技术选型，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><templatev-if="o.backStatus=='可退回'"><input type="checkbox"></template><templatev-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记录着头的索引值和行的索引值，并且以 ‘-’ 连接，这样在获取单元格的时候，就能获取到对应这行的行数据了。这里主要是用来调整表格布局。注意这里要设置行高，因为要保证单元格内的问题居中显示。