<ul class="tabs">
<li class="li-tab" v-for="(item,index) in tabsParam"
@click="toggleTabs(index)"
:class="{active:index==nowIndex}">{{item}}</li>
<span class=‘tabLeft‘>
<el-radio-group v-model="radioData" size=‘small‘ @change=‘radioDataChange‘ >
<el-radio-button label="今日"></el-radio-button>
<el-radio-button label="本周"></el-radio-button>
<el-radio-button label="本月"></el-radio-button>
<el-radio-button label="全年"></el-radio-button>
</el-radio-group>
<el-date-picker
ref=‘picker‘
v-model="value7"
type="daterange"
align="right"
unlink-panels
range-separator="~"
@change=‘handleChange‘
start-placeholder="开始日期"
end-placeholder="结束日期"
format="yyyy 年 MM 月 dd 日"
value-format="timestamp">
</el-date-picker>
</span>
</ul>
<el-row v-show=‘nowIndex==0‘>
1111
</el-row>
<el-row v-show=‘nowIndex==1‘>
2222
</el-row>
css:
.tabs{
border-bottom:1px solid #eee;
position: relative;
width: 100%;
height: 30px;
font:0;
padding:0;
text-align:justify;
}
.li-tab{
width: 6%;
height: 100%;
display:inline-block;
text-align: center;
}
.tabLeft{
position: absolute;
right:0;
top:-50%;
text-align: center;
vertical-align: middle
}
vue 源代码创建tabs
原文：https://www.cnblogs.com/Quxiya/p/10523212.html
