这种的需要双层嵌套。
代码:
<table id="ict-table" class="ict-table ict-report-table blue-theme"> <thead> <tr> <th class="width36"></th> <th>@L("Product")</th> <th class="width160" v-show="SpinnerBlock">盘拉工序</th> <th class="width160" v-show="InlineAnnealing">在线退火工序</th> <th class="width160" v-show="InnerGrooving">内螺纹成型工序</th> <th class="width160" v-show="Winding">精整工序</th> <th class="width160" v-show="Annealing">退火包装工序</th> <th class="width160" v-show="InnerGrooving2">内螺纹成型工序</th> </tr> </thead> <tbody> <template v-for="item in GroupInfoList"> <tr> <td class="ict-toggle-td" v-on:click="Show(item)"><span v-show="!item.IsShow">+</span><span v-show="item.IsShow">-</span></td> <td> <div class="lh48 f16">{{item.customerName}}</div> <div class="lh30"> <span class="f14 fwb">{{item.specification}}</span> <span> -- {{item.technology}}</span> </div> </td> <td v-show="SpinnerBlock"> <div class="w45p fl lh48 f24 fwb tac">{{item.盘拉工序.num}}</div> <div class="w55p fl" v-show="LastTD!='SpinnerBlock'"> <div class="tac lh24 f12">在制:{{item.盘拉工序.working}}</div> <div class="tac lh24 f12">下料:{{item.盘拉工序.worked}}</div> </div> <div class="cb bst f14 gray fwb tal">{{item.盘拉工序.weight.toFixed(3)}}吨</div> </td> <td v-show="InlineAnnealing"> <div class="w45p fl lh48 f24 fwb tac">{{item.在线退火工序.num}}</div> <div class="w55p fl" v-show="LastTD!='InlineAnnealing'"> <div class="tac lh24 f12">在制:{{item.在线退火工序.working}}</div> <div class="tac lh24 f12">下料:{{item.在线退火工序.worked}}</div> </div> <div class="cb bst f14 gray fwb tal">{{item.在线退火工序.weight.toFixed(3)}}吨</div> </td> <td v-show="InnerGrooving"> <div class="w45p fl lh48 f24 fwb tac">{{item.内螺纹成型工序.num}}</div> <div class="w55p fl" v-show="LastTD!='InnerGrooving'"> <div class="tac lh24 f12">在制:{{item.内螺纹成型工序.working}}</div> <div class="tac lh24 f12">下料:{{item.内螺纹成型工序.worked}}</div> </div> <div class="cb bst f14 gray fwb tal">{{item.内螺纹成型工序.weight.toFixed(3)}}吨</div> </td> <td v-show="Winding"> <div class="w45p fl lh48 f24 fwb tac">{{item.精整工序.num}}</div> <div class="w55p fl" v-show="LastTD!='Winding'"> <div class="tac lh24 f12">在制:{{item.精整工序.working}}</div> <div class="tac lh24 f12">下料:{{item.精整工序.worked}}</div> </div> <div class="cb bst f14 gray fwb tal">{{item.精整工序.weight.toFixed(3)}}吨</div> </td> <td v-show="Annealing"> <div class="w45p fl lh48 f24 fwb tac">{{item.退火包装工序.num}}</div> <div class="w55p fl" v-show="LastTD!='Annealing'"> <div class="tac lh24 f12">在制:{{item.退火包装工序.working}}</div> <div class="tac lh24 f12">下料:{{item.退火包装工序.worked}}</div> </div> <div class="cb bst f14 gray fwb tal">{{item.退火包装工序.weight.toFixed(3)}}吨</div> </td> <td v-show="InnerGrooving2"> <div class="w45p fl lh48 f24 fwb tac">{{item.内螺纹成型工序.num}}</div> <div class="w55p fl" v-show="LastTD!='InnerGrooving2'"> <div class="tac lh24 f12">在制:{{item.内螺纹成型工序.working}}</div> <div class="tac lh24 f12">下料:{{item.内螺纹成型工序.worked}}</div> </div> <div class="cb bst f14 gray fwb tal">{{item.内螺纹成型工序.weight.toFixed(3)}}吨</div> </td> </tr> <tr class="ict-toggle-row ict-table-extended" v-show="item.IsShow"> <td colspan="{{Colspan}}" v-if="!item.IsLoaded"> <div class="ict-loading"></div> </td> <td colspan="{{Colspan}}" v-if="item.IsLoaded"> <div class="ict-inner-td-wrapper"> <table class="ict-table"> <thead> <tr> <th class="width36"></th> <th class="">设备</th> <th class="width50">筐号</th> <th class="width160">批号</th> <th class="width70">重量</th> <th class="width50">等级</th> <th class="width50">判定</th> <th class="width50">状态</th> <th class="width110">上料时间</th> <th class="width110">下料时间</th> <th class="width36"></th> </tr> </thead> <tbody> <tr v-bind:class="{'in-processing':l.state==0}" v-for="l in item.list"> <td class="tac">{{$index+1}}</td> <td>{{l.equipmentName}}</td> <td>{{l.basketCode}}</td> <td>{{l.code}}</td> <td>{{l.weight}}</td> <td>{{l.grade}}</td> <td>{{l.quality==0?"合格":l.quality==1?"不合格":"待判定"}}</td> <td>{{l.state==0?"在制":"下料"}}</td> <td>{{l.loadTime}}</td> <td>{{l.unloadTime}}</td> <td style="padding:0;"> <a href="../../Quality/Tracing?code={{l.code}}&ticketid={{l.ticketID}}" class="ict-link tac" title="@L("PrdTracing")">…</a> </td> </tr> </tbody> <tfoot> <tr> <td colspan="11"> <div class="ict-pager clearfix" v-show="TotalCount>0"> <div class="ict-pager-navs w50p tal"> <a href="javascript:;" class="ict-pager-nav ict-pager-nav-first {{CurrentPage==1?'disabled':''}}" v-on:click="CurrentPage=1">@L("PageFirst")</a> <a href="javascript:;" class="ict-pager-nav ict-pager-nav-prev {{CurrentPage<2?'disabled':''}}" v-on:click="CurrentPage=CurrentPage-1">@L("PagePrev")</a> <div class="ict-pager-displayer"> <span class="ict-pager-current-page">{{CurrentPage}}</span> <span class="ict-pager-spliter">/</span> <span class="ict-pager-total-pages">{{TotalPages}}</span> </div> <a href="javascript:;" class="ict-pager-nav ict-pager-nav-next {{CurrentPage>TotalPages-1?'disabled':''}}" v-on:click="CurrentPage=CurrentPage+1">@L("PageNext")</a> <a href="javascript:;" class="ict-pager-nav ict-pager-nav-last {{CurrentPage>TotalPages-1?'disabled':''}}" v-on:click="CurrentPage=TotalPages">@L("PageLast")</a> </div> </div> </td> </tr> </tfoot> </table> </div> </td> </tr> </template> </tbody> </table>
两行的时候使用template