vue 实现选项卡
Posted jervy
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue 实现选项卡相关的知识，希望对你有一定的参考价值。
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 实现选项卡的主要内容，如果未能解决你的问题，请参考以下文章