vue中，实现选项卡

<div class="alert-level-cont">
<ul id="alert-level-ul" class="clear alert-level-cont-title">
<li v-for="(item,index) in tabsName" @click="tabsSwitch(index)" v-bind:class="{active:item.isActive}" class="fl">{{item.name}}</li>
</ul>
<div class="alert-level-cont-list">
<div class="display" style="display: block;">
<h3>未处理告警列表1</h3>
<table cellspacing="0" class="alert-level-cont-list-table">
<tr>
<td>序号</td>
<td>告警名称</td>
<td>状态</td>
</tr>
<tr>
<td class="number number-one">1</td>
<td>污水站MBR回流泵B相电流大于4.9A预警</td>
<td>未处理</td>
</tr>
<tr>
<td class="number number-two">2</td>
<td>污水站调节池液位大于等于4.5m预警</td>
<td>未处理</td>
</tr>
<tr>
<td class="number number-three">3</td>
<td>约克空调冷却水进水温度大于50℃</td>
<td>未处理</td>
</tr>
<tr>
<td class="number">4</td>
<td>一号锅炉压力大于等于0.96Mpa预警</td>
<td>未处理</td>
</tr>
<tr>
<td class="number">5</td>
<td>配电室温度超过35度</td>
<td>未处理</td>
</tr>
</table>
<h3>已处理告警列表</h3>
<table cellspacing="0" class="alert-level-cont-list-table">
<tr>
<td>序号</td>
<td>告警名称</td>
<td>状态</td>
</tr>
<tr>
<td class="number number-one">1</td>
<td>污水站MBR回流泵B相电流大于4.9A预警</td>
<td>未处理</td>
</tr>
<tr>
<td class="number number-two">2</td>
<td>污水站调节池液位大于等于4.5m预警</td>
<td>未处理</td>
</tr>
<tr>
<td class="number number-three">3</td>
<td>约克空调冷却水进水温度大于50℃</td>
<td>未处理</td>
</tr>
<tr>
<td class="number">4</td>
<td>一号锅炉压力大于等于0.96Mpa预警</td>
<td>未处理</td>
</tr>
<tr>
<td class="number">5</td>
<td>配电室温度超过35度</td>
<td>未处理</td>
</tr>
</table>
</div>
<div class="display">
<h3>未处理告警列表2</h3>
<table cellspacing="0" class="alert-level-cont-list-table">
<tr>
<td>序号</td>
<td>告警名称</td>
<td>状态</td>
</tr>
<tr>
<td class="number number-one">1</td>
<td>污水站MBR回流泵B相电流大于4.9A预警</td>
<td>未处理</td>
</tr>
<tr>
<td class="number number-two">2</td>
<td>污水站调节池液位大于等于4.5m预警</td>
<td>未处理</td>
</tr>
<tr>
<td class="number number-three">3</td>
<td>约克空调冷却水进水温度大于50℃</td>
<td>未处理</td>
</tr>
<tr>
<td class="number">4</td>
<td>一号锅炉压力大于等于0.96Mpa预警</td>
<td>未处理</td>
</tr>
<tr>
<td class="number">5</td>
<td>配电室温度超过35度</td>
<td>未处理</td>
</tr>
</table>
<h3>已处理告警列表</h3>
<table cellspacing="0" class="alert-level-cont-list-table">
<tr>
<td>序号</td>
<td>告警名称</td>
<td>状态</td>
</tr>
<tr>
<td class="number number-one">1</td>
<td>污水站MBR回流泵B相电流大于4.9A预警</td>
<td>未处理</td>
</tr>
<tr>
<td class="number number-two">2</td>
<td>污水站调节池液位大于等于4.5m预警</td>
<td>未处理</td>
</tr>
<tr>
<td class="number number-three">3</td>
<td>约克空调冷却水进水温度大于50℃</td>
<td>未处理</td>
</tr>
<tr>
<td class="number">4</td>
<td>一号锅炉压力大于等于0.96Mpa预警</td>
<td>未处理</td>
</tr>
<tr>
<td class="number">5</td>
<td>配电室温度超过35度</td>
<td>未处理</td>
</tr>
</table>
</div>
<div class="display">
<h3>未处理告警列表3</h3>
<table cellspacing="0" class="alert-level-cont-list-table">
<tr>
<td>序号</td>
<td>告警名称</td>
<td>状态</td>
</tr>
<tr>
<td class="number number-one">1</td>
<td>污水站MBR回流泵B相电流大于4.9A预警</td>
<td>未处理</td>
</tr>
<tr>
<td class="number number-two">2</td>
<td>污水站调节池液位大于等于4.5m预警</td>
<td>未处理</td>
</tr>
<tr>
<td class="number number-three">3</td>
<td>约克空调冷却水进水温度大于50℃</td>
<td>未处理</td>
</tr>
<tr>
<td class="number">4</td>
<td>一号锅炉压力大于等于0.96Mpa预警</td>
<td>未处理</td>
</tr>
<tr>
<td class="number">5</td>
<td>配电室温度超过35度</td>
<td>未处理</td>
</tr>
</table>
<h3>已处理告警列表</h3>
<table cellspacing="0" class="alert-level-cont-list-table">
<tr>
<td>序号</td>
<td>告警名称</td>
<td>状态</td>
</tr>
<tr>
<td class="number number-one">1</td>
<td>污水站MBR回流泵B相电流大于4.9A预警</td>
<td>未处理</td>
</tr>
<tr>
<td class="number number-two">2</td>
<td>污水站调节池液位大于等于4.5m预警</td>
<td>未处理</td>
</tr>
<tr>
<td class="number number-three">3</td>
<td>约克空调冷却水进水温度大于50℃</td>
<td>未处理</td>
</tr>
<tr>
<td class="number">4</td>
<td>一号锅炉压力大于等于0.96Mpa预警</td>
<td>未处理</td>
</tr>
<tr>
<td class="number">5</td>
<td>配电室温度超过35度</td>
<td>未处理</td>
</tr>
</table>
</div>
</div>
</div>

<script>
export default {
data() {
return {
tabsName: [{
name: '次要',
isActive: true
}, {
name: '重要',
isActive: false
}, {
name: '严重',
isActive: false
}],
active: false
}
},
methods: {
tabsSwitch(tabIndex) {
var tabCollection = document.querySelectorAll(".display"),
len = tabCollection.length;
for(var i = 0; i < len; i++) {
tabCollection[i].style.display = "none";
this.tabsName[i].isActive = false;
}
this.tabsName[tabIndex].isActive = true;
tabCollection[tabIndex].style.display = "block";
}
}
}

</script>

<style>

.display{
display: none;

}

</style>