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