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
Vue 双层嵌套的更多相关文章
- 使用FragmentTabHost+TabLayout+ViewPager实现双层嵌套Tab
大多数应用程序都会在底部使用3~5个Tab对应用程序的主要功能进行划分,对于一些信息量非常大的应用程序,还需要在每个Tab下继续划分子Tab对信息进行分类显示. 本文实现采用FragmentTabHo ...
- android 解决ViewPager双层嵌套的滑动问题
解决ViewPager双层嵌套的滑动问题 今天我分享一下ViewPager的双层嵌套时影响内部ViewPager的触摸滑动问题 之前在做自己的一个项目的时候,遇到广告栏图片动态切换,我第一时间想到的就 ...
- vue中嵌套页面 iframe 标签
vue中嵌套iframe,将要嵌套的文件放在static下面: <iframe src="../../../static/bear.html" width="300 ...
- vue中嵌套页面（iframe）
vue中嵌套iframe,将要嵌套的文件放在static下面.(要将打包文件整体放在statici里,我的文件名是canvas) src可以使用相对路径,也可使用服务器根路径http:localhos ...
- Vue v-for嵌套数据渲染问题
Vue v-for嵌套数据渲染问题 问题描述: 由于在获取商品子分类的时候,同时需要获取子分类下的商品,那么多层的列表渲染就只能是第一层好用 问题原因: vue在处理多层的渲染的时候,不能直接用等号赋 ...
- Vue路由嵌套
Vue路由嵌套 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- vue 路由嵌套 及 router-view vue-router --》children
vue 路由嵌套 vue-router -->children 在项目的很多子页面中,我们往往需要在同一个页面做一个组件的切换,同时保存这个页面的部分数据(比如树形菜单),进而显示不同的数据 ...
- vue教程3-06 vue路由嵌套(多层路由)，路由其他信息
多层嵌套: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- vue 给嵌套的iframe子页面传数据 postMessage
Vue组件下嵌套了一个不同域下的子页面,iframe子页面不能直接获取到父页面的数据,即使数据存在localStorage中,子页面一样是获取不到的,所以只好使用postMessage传数据: < ...
随机推荐
- Unity正式发布首个“实验性”VR编辑器，支持HTC Vive和Oculus Rift
Unity今天正式推出"实验性"VR编辑器.据悉,EditorVR是Unity游戏引擎中的一个组件,可让开发者在虚拟现实环境中开发游戏.为何要称之为"实验性"? ...
- Universal JS module loader
With dependency ;(function (root, factory) { if (typeof define === 'function' && define.amd) ...
- static的本质
通过反编译发现,static的本质是abstract sealed.因此,无法继承System.Math类,因为它是static的.
- Js C# 实现跨域访问数据
使用项目一的js调用项目二的数据 1.项目一 @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta ...
- mac 终端乱码
我系统是英文的 export LANG=en_US.UTF-8export LC_ALL=en_US.UTF-8 中文的 export LANG=zh_CN.UTF-8 export LANG=en_ ...
- PHP slim restfull框架nginx 配置
http://docs.slimframework.com/ 下载地址这个东西很不错,照到官方的例子做 <?php require 'vendor/autoload.php'; $app = n ...
- iis中MIME类型的介绍与使用
今天在服务器上碰到由.mp3格式转化生成的.m4r格式不能被浏览器访问(MP3与m4r在同个域名目录下eg:www.abc.com/1.m4r) 解决办法: 1.选中文件所在的站点: 2.找到MIME ...
- JavaScript笔记——引用类型之Object类型和Function类型
<JavaScript高级程序设计>中介绍的几种JavaScript的引用类型,本文只记了Object跟Function类型 Object类型 创建对象 var person = new ...
- css3动画在动作结束时保持该状态不变的解决办法
animation-fill-mode : none | forwards | backwards | both; none:不改变默认行为. forwards :当动画完成后,保持最后一个属性值(在 ...
- django1.9 创建项目和app并初始化项目
创建项目: django-admin startproject mytest04 创建app: python manage.py startapp app04 配置:settings.py 1. 2 ...