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

最新推荐文章于 2024-08-16 11:25:57 发布

sunny.day

最新推荐文章于 2024-08-16 11:25:57 发布

阅读量1.5w

点赞数

本文链接：https://blog.csdn.net/yang__k/article/details/82285147

版权

本文介绍了如何利用iview框架实现顶部导航栏和模块切换功能，包括HTML和CSS代码示例，以及模块数量显示的JavaScript实现，展示了最终的运行效果。

摘要由CSDN通过智能技术生成

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"