vue + element tab选项卡 实现。。。

< template >

< div style= "margin-top:10px;" >

< el-tabs type= "card" @tab-click=" handleClick" >

< el-tab-pane label= "基本信息" ></ el-tab-pane >

< el-tab-pane label= "水量查询" ></ el-tab-pane >

< el-tab-pane label= "异常记录" ></ el-tab-pane >

</ el-tabs >

< div v-if=" tabType == 0" >

< div class= "leftdatalis" >

< ul class= "detalis" >

< li >< span >水表序列号： </ span >< strong >{ { allDatas. uuid}} </ strong ></ li >

< li class= "threeName" >

< span >房源名称： </ span >< strong >{ { allDatas. homeName}} </ strong >

< span >楼层： </ span >< strong >{ { allDatas. floorName}} </ strong >

< span >房间号： </ span >< strong >{ { allDatas. roomName}} </ strong >

</ li >

< li >

< span >产品类型： </ span >

< strong v-if=" allDatas. meterType == 1" >光电直读湿式冷水表 </ strong >

< strong v-if=" allDatas. meterType == 2" >光电直读干式热水表 </ strong >

</ li >

< li >< span >绑定时间： </ span >< strong >{ { allDatas. createdAt}} </ strong ></ li >

< li >< span >更新时间： </ span >< strong >{ { allDatas. meterUpdatedAt}} </ strong ></ li >

< li >

< span >水表读数： </ span >

< strong class= "lastAmount" >{ { allDatas. lastAmount}} </ strong >

< el-button type= "primary" @click=" getWaterDetails( 0)" >刷新 </</