iview tabs 顶部导航栏和模块切换栏

1.顶部导航栏:

html:

 <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>

css:

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

运行结果:

2.模块浏览:

HTML:

<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>

js:

各个模块的数量显示:

 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:"",

运行结果: