iview tabs 顶部导航栏和模块切换栏的示例代码

 <div class="tab-pane">      <tabs>          <tab-pane label="上明" name="detail-report" class="tab1">              <div class="tab-pane-1">  0000000000  </div>  <upload multiple :action="uploadUrl"      :show-upload-list="false" :on-success="uploadSuccess" accept=".xlsx">    <i-button class="upload" type="primary"><icon class="icon3"></icon>上清</i-button>  </upload>  <i-input class="search" v-model="input_data3" id="yk" placeholder="入要查找的" icon="ios-search-strong"  @on-enter="search" @on-click="search" @on-change="inputChanged"></i-input>  <i-table id="table1" border :columns="columns1" :data="data1"></i-table>  <div style="float: right;margin: 7px;font-size: 14px">      <page show-elevator :total="datacount" :current="current_num" placement="top" @on-change="numChange" show-sizer       pageSize="pageSize" @on-page-size-change="pageSizeChange"></page>    </div>    <div class="down">        <span class="daochu" @click="export1" style="cursor: pointer">          <span class="export-icon"></span>{{ExportToExcel}}</span>      </div>  </div>  </tab-pane>  <tab-pane label="上" name="total-report" class="tab2">    <div class="tab-pane-2">   45646468465      </div>      </tab-pane>  </tabs>

.ivu-tabs-nav{ float: right;}.ivu-tabs .ivu-tabs-bar { border-width: 0;}

<modal v-model="modal1" draggable scrollable :mask-closable="false" title="人力明" @on-ok="ok" @on-cancel="cancel"     class="modal2" width="1200px" styles="background:#f00">    <p>{{duanluo}}</p>      <br>        <div id="asd">            <tabs type="card" class="tabs" v-model="tab_model" @on-click="message">              <tab-pane :label="lab1" name="name0">                <div class="t1">                  <i-table :columns="columns3":data="data3"> </i-table>                  <page class="page2" show-elevator :total="count1" :current="current_num1"                   placement="top" @on-change="numChange1"                   show-sizer :page-size="pageSize1" @on-page-size-change="pageSizeChange1"></page>                </div>                <div class="c1" id="c0">                </div>              </tab-pane>              <tab-pane :label="lab2" name="name1">                  <div class="t1">                <i-table :columns="columns3" highlight-row :data="data3"> </i-table>                <page class="page2" show-elevator :total="count1" :current="current_num1"                 placement="top" @on-change="numChange1"                 show-sizer :page-size="pageSize1" @on-page-size-change="pageSizeChange1"></page>                </div>                <div class="c1" id="c1">                  </div>              </tab-pane>              <tab-pane :label="lab3" name="name2">                  <div class="t1">                  <i-table :columns="columns3" :data="data3"> </i-table>                  <page class="page2" show-elevator :total="count1" :current="current_num1"                   placement="top" @on-change="numChange1"                   show-sizer :page-size="pageSize1" @on-page-size-change="pageSizeChange1"></page>                  </div>                  <div class="c1" id="c2">                    </div>              </tab-pane>

 Main: {    data() {     return {      lab1: h => {        return h("div", [         h("span", "全部人力"),         h("Badge", {          props: {           count: this.length1,          }         })        ]);       },       lab2: h => {        return h("div", [         h("span", "班到"),         h("Badge", {          props: {           count: this.length2,          }         })        ]);       },       lab3: h => {        return h("div", [         h("span", "DL1"),         h("Badge", {          props: {           count: this.length3,          }         })        ]);       },       length1:"",       length2:"",       length3:"",