iview tabs 顶部导航栏和模块切换栏的示例代码
编程学习 2021-07-04 15:50www.dzhlxh.cn编程入门
这篇文章主要介绍了iview tabs 顶部导航栏和模块切换栏的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们狼蚁网站SEO优化随着长沙网络推广来一起学习学习吧
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:"",
运行结果:
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。