Vue 双层嵌套

这种的需要双层嵌套。

代码：

 <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