Posted in Javascript onMarch 04, 2019
1.顶部导航栏:
html:
<div class="tab-pane"> <tabs> <tab-pane label="上???r?明?" 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>上?髑??lt;/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="上???r???" 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:"",
运行结果:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。
iview tabs 顶部导航栏和模块切换栏的示例代码
- Author -
sunny.day声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@