iview tabs 顶部导航栏和模块切换栏的示例代码


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;
}

运行结果:

iview tabs 顶部导航栏和模块切换栏的示例代码

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 顶部导航栏和模块切换栏的示例代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript调试工具(下载)
Jan 09 Javascript
IE6与IE7中,innerHTML获取param的区别
Mar 15 Javascript
location.href 在IE6中不跳转的解决方法与推荐使用代码
Jul 08 Javascript
AngularJS模仿Form表单提交的实现代码
Dec 08 Javascript
浅谈Angular.js中使用$watch监听模型变化
Jan 10 Javascript
Bootstrap Table从零开始
Jun 30 Javascript
es7学习教程之Decorators(修饰器)详解
Jul 21 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
解决angularjs中同步执行http请求的方法
Aug 13 Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
Nov 25 Javascript
js实现星星打分效果
Jul 05 Javascript
Javascript表单序列化原理及实现代码详解
Oct 30 Javascript
Vuex mutitons和actions初使用详解
Mar 04 #Javascript
JS重学系列之聊聊new操作符
Mar 04 #Javascript
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 #jQuery
ES10 特性的完整指南小结
Mar 04 #Javascript
node.js使用express框架进行文件上传详解
Mar 03 #Javascript
微信小程序新手教程之启动页的重要性
Mar 03 #Javascript
微信小程序新手教程之页面打开数量限制
Mar 03 #Javascript
You might like
php微信开发自定义菜单
2016/08/27 PHP
Laravel实现表单提交
2017/05/07 PHP
PHP设计模式之PHP迭代器模式讲解
2019/03/22 PHP
jQuery 插件 将this下的div轮番显示
2009/04/09 Javascript
学习ExtJS Column布局
2009/10/08 Javascript
jQuery判断多个input file 都不能为空的例子
2015/06/23 Javascript
JSON遍历方式实例总结
2015/12/07 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
2016/06/23 Javascript
jquery实现转盘抽奖功能
2017/01/06 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
2017/03/21 Javascript
Node.js使用gm拼装sprite图片
2017/07/04 Javascript
详解Vuex中mapState的具体用法
2017/09/28 Javascript
微信小程序实现手指触摸画板
2018/07/09 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
2018/09/15 Javascript
JavaScript跳出循环的三种方法(break, return, continue)
2019/07/30 Javascript
python入门教程之识别验证码
2017/03/04 Python
Zookeeper接口kazoo实例解析
2018/01/22 Python
Numpy中转置transpose、T和swapaxes的实例讲解
2018/04/17 Python
pandas to_excel 添加颜色操作
2020/07/14 Python
快速创建python 虚拟环境
2020/11/28 Python
手把手教你实现一个canvas智绘画板的方法
2019/03/04 HTML / CSS
实现向右循环移位
2014/07/31 面试题
承认错误的检讨书
2014/01/30 职场文书
2014年开学第一课活动方案
2014/03/06 职场文书
基层党建工作宣传标语
2014/06/24 职场文书
管理标语大全
2014/06/24 职场文书
交警正风肃纪剖析材料
2014/10/29 职场文书
优秀校长事迹材料
2014/12/24 职场文书
财务负责人岗位职责
2015/02/03 职场文书
财政局个人总结
2015/03/04 职场文书
幼儿园教师安全责任书
2015/05/08 职场文书
学习经验交流会总结
2015/11/02 职场文书
2016年社区党支部公开承诺书
2016/03/25 职场文书
mysql死锁和分库分表问题详解
2021/04/16 MySQL
golang switch语句的灵活写法介绍
2021/05/06 Golang
《吸血鬼:避世 血猎》官宣4.27发售 系列首款大逃杀
2022/04/03 其他游戏