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传数据: < ...
随机推荐
- 推荐两款PC健康小软件
一.前言 对于经常需要坐在电脑前工作一整天的人来说,健康问题是不得不关注的.下面推荐我一直在用的两款体积非常小(几百KB)的健康小软件,也许可以在无形中保护你.提醒你. 1. FadeTop 这是一款 ...
- Loadrunner脚本录制常见问题整理
1.LoadRunner录制脚本时为什么不弹出IE浏览器? 当一台主机上安装多个浏览器时,LoadRunner录制脚本经常遇到不能打开浏览器的情况,可以用下面的方法来解决. 启动浏览器,打开Inter ...
- [知识点]C++中的运算符
1.前言 之前最开始学习语法和基础知识的时候,基本上最简单的运算符有所接触,当时对于位运算这种东西完全没有概念.今天对C++中出现的部分运算符尤其是位运算符进行一些总结. 2.+ - * / % 这些 ...
- 【wikioi】1003 电话连线
题目链接 算法: 最小生成树 PS:被卡过2天(中间的时间没去做).日期:2013-09-13 13:49:47 ~ 2013-09-17 13:01:07 此题为基础题 刚开始学图论时只会用Krus ...
- 【hdu2795】Billboard
Problem Description At the entrance to the university, there is a huge rectangular billboard of size ...
- hdu1232 并查集
1. hdu1232 2.链接:http://acm.hdu.edu.cn/showproblem.php?pid=1232 3.总结:简单并查集 #include<iostream> # ...
- golang gc 问题(转的)
在实际使用go语言的过程中,碰到了一些看似奇怪的内存占用现象,于是决定对go语言的垃圾回收模型进行一些研究.本文对研究的结果进行一下总结. 什么是垃圾回收? 曾几何时,内存管理是程序员开发应用的一大难 ...
- supervisor、pm2、forever坐下来聊聊
supervisor 是开发环境用.或者用nodemon,node-dev 代替了supervisor 和 nodemon,它和coffeescript兼容最好. forever 管理多个站点,每个站 ...
- Search Ads 已经在美国区上线 - iOS 移动开发周报（46）
Search Ads 已经在美国区上线 - iOS 移动开发周报(46) 新闻 Search Ads 上线 苹果的 AppStore 搜索广告终于 正式上线了 https://developer.ap ...
- 满足要求的最长上升子序列（nlogn）
题意:数列A1,A2,...,AN,修改最少的数字,使得数列严格单调递增.(1<=N<=10^5; 1<=Ai<=10^9 ) 思路:首先要明白的一点是数列是严格单调递增,那么 ...