为何选择亿云小程序_iview tabs 顶部导航栏和模块

iview tabs 顶部导航栏和模块切换栏的示例代码     .day   这篇文章主要介绍了iview tabs 顶部导航栏和模块切换栏的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
upload multiple :action="uploadUrl" :show-upload-list="false" :ess="ess" accept=".xlsx" i-button type="primary" icon /icon 上傳清單 /i-button /upload i-input 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 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 span @click="export1" span /span {{ExportToExcel}} /span /div /div /tab-pane tab-pane label="上崗時間總計" name="total-report" div /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" 
 width="1200px" styles="background:#f00" 
 p {{duanluo}} /p 
 div id="asd" 
 tabs type="card" v-model="tab_model" @on-click="message" 
 tab-pane :label="lab1" name="name0" 
 div 
 i-table :columns="columns3":data="data3" /i-table 
 page 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 id="c0" 
 /div 
 /tab-pane 
 tab-pane :label="lab2" name="name1" 
 div 
 i-table :columns="columns3" highlight-row :data="data3" /i-table 
 page 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 id="c1" 
 /div 
 /tab-pane 
 tab-pane :label="lab3" name="name2" 
 div 
 i-table :columns="columns3" :data="data3" /i-table 
 page 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 id="c2" 
 /div 
 /tab-pane 

js:

各个模块的数量显示:

 Main: {
 data() {
 return {
 lab1: h = {
 return h("div", [
 h("span", "全部人力"),
 h("Badge", {
 pro凡科抠图: {
 count: this.length1,
 lab2: h = {
 return h("div", [
 h("span", "當班應到"),
 h("Badge", {
 pro凡科抠图: {
 count: this.length2,
 lab3: h = {
 return h("div", [
 h("span", "DL1"),
 h("Badge", {
 pro凡科抠图: {
 count: this.length3,
 length1:"",
 length2:"",
 length3:"",

运行结果:

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持凡科。