vue 实现选项卡

时间：2020-05-19 18:29:47 阅读：61 评论：0 收藏：0 [点我收藏+]

html 部分：

  1     <div>

  2         <div>
  3           <ul>
  4             <li
  5               v-for="(item,index) in list"
  6               :key="item.index"
  7               :class="{active:num==index}"
  8               @click="getNum(index)"
  9             >{{item}}</li>
 10           </ul>
 11         </div>
 12   　　　　<!-- 卡片内容 -->
 13         <div class="tabCon">
 14           <!-- 遥感 -->
 15           <div v-show="num==0">
 16             <el-row type="flex" class="row-bg" justify="space-between">
 17               <el-col :span="6">
 18                 <div class="grid-content bg-purple">监测机构:</div>
 19               </el-col>
 20               <el-col :span="6">
 21                 <div class="grid-content bg-purple-light">张店区站点1</div>
 22               </el-col>
 23               <el-col :span="6">
 24                 <div class="grid-content bg-purple">点位编号:</div>
 25               </el-col>
 26               <el-col :span="6">
 27                 <div class="grid-content bg-purple">THUEF1542121311</div>
 28               </el-col>
 29             </el-row>
 30             <el-row type="flex" class="row-bg" justify="space-between">
 31               <el-col :span="6">
 32                 <div class="grid-content bg-purple">车道号:</div>
 33               </el-col>
 34               <el-col :span="6">
 35                 <div class="grid-content bg-purple-light">33</div>
 36               </el-col>
 37               <el-col :span="6">
 38                 <div class="grid-content bg-purple">通过时间:</div>
 39               </el-col>
 40               <el-col :span="6">
 41                 <div class="grid-content bg-purple">2017-12-25 13:35:30</div>
 42               </el-col>
 43             </el-row>
 44             <el-row>
 45               <el-col :span="6">
 46                 <div class="grid-content bg-purple">速度:</div>
 47               </el-col>
 48               <el-col :span="6">
 49                 <div class="grid-content bg-purple">20.11:30</div>
 50               </el-col>
 51               <el-col :span="6">
 52                 <div class="grid-content bg-purple">判定结果:</div>
 53               </el-col>
 54               <el-col :span="6">
 55                 <div class="grid-content bg-purple">不合格</div>
 56               </el-col>
 57             </el-row>
 58           </div>
 59           <!-- 年检 -->
 60           <div v-show="num==1">
 61             <el-row type="flex" class="row-bg" justify="space-between">
 62               <el-col :span="6">
 63                 <div class="grid-content bg-purple">监测站:</div>
 64               </el-col>
 65               <el-col :span="6">
 66                 <div class="grid-content bg-purple-light">张店区站点1</div>
 67               </el-col>
 68               <el-col :span="6">
 69                 <div class="grid-content bg-purple">点位编号:</div>
 70               </el-col>
 71               <el-col :span="6">
 72                 <div class="grid-content bg-purple">THUEF1542121311</div>
 73               </el-col>
 74             </el-row>
 75             <el-row type="flex" class="row-bg" justify="space-between">
 76               <el-col :span="6">
 77                 <div class="grid-content bg-purple">检测方法:</div>
 78               </el-col>
 79               <el-col :span="6">
 80                 <div class="grid-content bg-purple-light">稳态工况法</div>
 81               </el-col>
 82               <el-col :span="6">
 83                 <div class="grid-content bg-purple">检测时间:</div>
 84               </el-col>
 85               <el-col :span="6">
 86                 <div class="grid-content bg-purple">2017-12-25 13:35:30</div>
 87               </el-col>
 88             </el-row>
 89             <el-row>
 90               <el-col :span="6">
 91                 <div class="grid-content bg-purple">是否初检:</div>
 92               </el-col>
 93               <el-col :span="6">
 94                 <div class="grid-content bg-purple">是</div>
 95               </el-col>
 96               <el-col :span="6">
 97                 <div class="grid-content bg-purple">判定结果:</div>
 98               </el-col>
 99               <el-col :span="6">
100                 <div class="grid-content bg-purple">不合格</div>
101               </el-col>
102             </el-row>
103           </div>
104           <!-- 路检 -->
105           <div v-show="num==2">
106             <el-row type="flex" class="row-bg" justify="space-between">
107               <el-col :span="6">
108                 <div class="grid-content bg-purple">监测机构:</div>
109               </el-col>
110               <el-col :span="6">
111                 <div class="grid-content bg-purple-light">郑州环保局</div>
112               </el-col>
113               <el-col :span="6">
114                 <div class="grid-content bg-purple">检测编号:</div>
115               </el-col>
116               <el-col :span="6">
117                 <div class="grid-content bg-purple">T542121311</div>
118               </el-col>
119             </el-row>
120             <el-row type="flex" class="row-bg" justify="space-between">
121               <el-col :span="6">
122                 <div class="grid-content bg-purple">车牌号码:</div>
123               </el-col>
124               <el-col :span="6">
125                 <div class="grid-content bg-purple-light">冀B6XXXXX</div>
126               </el-col>
127               <el-col :span="6">
128                 <div class="grid-content bg-purple">车牌类型:</div>
129               </el-col>
130               <el-col :span="6">
131                 <div class="grid-content bg-purple">轻型汽油车</div>
132               </el-col>
133             </el-row>
134             <el-row>
135               <el-col :span="6">
136                 <div class="grid-content bg-purple">检测时间:</div>
137               </el-col>
138               <el-col :span="6">
139                 <div class="grid-content bg-purple">2019、223、</div>
140               </el-col>
141               <el-col :span="6">
142                 <div class="grid-content bg-purple">检测结果:</div>
143               </el-col>
144               <el-col :span="6">
145                 <div class="grid-content bg-purple">不合格</div>
146               </el-col>
147               <el-col :span="6">
148                 <div class="grid-content bg-purple">是否处罚:</div>
149               </el-col>
150               <el-col :span="6">
151                 <div class="grid-content bg-purple">是</div>
152               </el-col>
153             </el-row>
154           </div>
155           <!-- IM站治理 -->
156           <div v-show="num==3">
157             <el-row type="flex" class="row-bg" justify="space-between">
158               <el-col :span="6">
159                 <div class="grid-content bg-purple">治理原因:</div>
160               </el-col>
161               <el-col :span="6">
162                 <div class="grid-content bg-purple-light">尾气超标</div>
163               </el-col>
164               <el-col :span="6">
165                 <div class="grid-content bg-purple">治理站名称:</div>
166               </el-col>
167               <el-col :span="6">
168                 <div class="grid-content bg-purple">郑州祥和汽车维修公司</div>
169               </el-col>
170             </el-row>
171             <el-row type="flex" class="row-bg" justify="space-between">
172               <el-col :span="6">
173                 <div class="grid-content bg-purple">维修内容:</div>
174               </el-col>
175               <el-col :span="6">
176                 <div class="grid-content bg-purple-light">OBD清洗</div>
177               </el-col>
178               <el-col :span="6">
179                 <div class="grid-content bg-purple">维修时间:</div>
180               </el-col>
181               <el-col :span="6">
182                 <div class="grid-content bg-purple">2017-12-25 13:35:30</div>
183               </el-col>
184             </el-row>
185           </div>
186           <!-- 预警处罚清单 -->
187           <div v-show="num==4">
188             <el-row type="flex" class="row-bg" justify="space-between">
189               <el-col :span="6">
190                 <div class="grid-content bg-purple">预警时间:</div>
191               </el-col>
192               <el-col :span="6">
193                 <div class="grid-content bg-purple-light">2019-12-25 15：30：35</div>
194               </el-col>
195               <el-col :span="6">
196                 <div class="grid-content bg-purple">预警地点:</div>
197               </el-col>
198               <el-col :span="6">
199                 <div class="grid-content bg-purple">郑州市和平大道</div>
200               </el-col>
201             </el-row>
202             <el-row type="flex" class="row-bg" justify="space-between">
203               <el-col :span="6">
204                 <div class="grid-content bg-purple">预警内容:</div>
205               </el-col>
206               <el-col :span="6">
207                 <div class="grid-content bg-purple-light">氮氧化合物超标</div>
208               </el-col>
209               <el-col :span="6">
210                 <div class="grid-content bg-purple">处理结果:</div>
211               </el-col>
212               <el-col :span="6">
213                 <div class="grid-content bg-purple">已处理</div>
214               </el-col>
215             </el-row>
216           </div>
217         </div>
218       </div>

export default {

data() {

return {

activeName: "first",

tableData: [

{ date: "当前尿素液位", name: "75%" },

{ date: "SCR下游NOx浓度", name: "ssdd" }

num: 0, //默认显示第一个

list: ["遥感", "年检", "路检", "IM站治理", "预警处罚清单"],

tabContents: ["dhiiheddddddss"]

};

methods: {

rowClass() {

return "background: #fff;color: #909399;font-weight: 600;";

getNum(index) {

console.log(index);

this.num = index;

}

};

vue 实现选项卡

标签：站点 get xxxx 时间维修 exp 机构 weight 原因

原文地址：https://www.cnblogs.com/jervy/p/12918152.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行