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:"",
运行结果:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
内蒙古资源网 Copyright www.nmgbbs.com
暂无“iview tabs 顶部导航栏和模块切换栏的示例代码”评论...
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。