<div> <tabs> <tab-pane label="上崗時間明細"> <div> 0000000000 </div> <upload multiple :action="uploadUrl" :show-upload-list="false" :on-success="uploadSuccess" accept=".xlsx"> <i-button type="primary"><icon></icon>上傳清單</i-button> </upload> <i-input v-model="input_data3" placeholder="請輸入要查找的關鍵詞" icon="ios-search-strong" @on-enter="search" @on-click="search" @on-change="inputChanged"></i-input> <i-table 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="上崗時間總計"> <div> 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" styles="background:#f00"> <p>{{duanluo}}</p> <br> <div> <tabs type="card" v-model="tab_model" @on-click="message"> <tab-pane :label="lab1"> <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> </div> </tab-pane> <tab-pane :label="lab2"> <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> </div> </tab-pane> <tab-pane :label="lab3"> <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> </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:"",
运行结果: