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 相关文章推荐
js获取php变量的实现代码
Aug 10 Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
Dec 12 Javascript
javascript简单实现图片预加载
Dec 03 Javascript
JQuery中DOM事件合成用法实例分析
Jun 13 Javascript
jQuery左右滚动支持图片放大缩略图图片轮播代码分享
Aug 26 Javascript
深入浅析JavaScript中的constructor
Apr 19 Javascript
JavaScript数组方法总结分析
May 06 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
Jul 07 Javascript
老生常谈Javascript中的原型和this指针
Oct 09 Javascript
VUE JS 使用组件实现双向绑定的示例代码
Jan 10 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
Aug 03 Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
Nov 04 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处理斐波那契数列非递归方法
2012/02/04 PHP
一个漂亮的php验证码类(分享)
2013/08/06 PHP
php禁止某ip或ip地址段访问的方法
2015/02/25 PHP
PHP微信红包生成代码分享
2016/10/06 PHP
php+ajax 文件上传代码实例
2019/03/18 PHP
PHP面向对象程序设计模拟一般面向对象语言中的方法重载(overload)示例
2019/06/13 PHP
JQuery获取当前屏幕的高度宽度的实现代码
2011/07/12 Javascript
jquery 无限级联菜单案例分享
2013/03/26 Javascript
解决checkbox的attr(checked)一直为undefined问题
2014/06/16 Javascript
一个JavaScript获取元素当前高度的实例
2014/10/29 Javascript
JavaScript中的getMilliseconds()方法使用详解
2015/06/10 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
2015/07/02 Javascript
JavaScript模板引擎用法实例
2015/07/10 Javascript
jquery实现select下拉框美化特效代码分享
2015/08/18 Javascript
nodejs 中模拟实现 emmiter 自定义事件
2016/02/22 NodeJs
jQuery实现百度登录框的动态切换效果
2017/04/21 jQuery
详解如何使用Node.js编写命令工具——以vue-cli为例
2017/06/29 Javascript
vue-router命名路由和编程式路由传参讲解
2019/01/19 Javascript
Vue如何基于vue-i18n实现多国语言兼容
2020/07/17 Javascript
vue 实现锚点功能操作
2020/08/10 Javascript
微信小程序实现购物车功能
2020/11/18 Javascript
[51:17]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第二场 10月30日
2020/10/31 DOTA
python分析apache访问日志脚本分享
2015/02/26 Python
用Python实现斐波那契(Fibonacci)函数
2016/03/25 Python
用tensorflow实现弹性网络回归算法
2018/01/09 Python
pandas数据筛选和csv操作的实现方法
2019/07/02 Python
python飞机大战pygame游戏背景设计详解
2019/12/17 Python
Pycharm中Python环境配置常见问题解析
2020/01/16 Python
美津浓美国官网:Mizuno美国
2018/08/07 全球购物
大学学生会竞选稿
2015/11/19 职场文书
《女娲补天》读后感5篇
2019/12/31 职场文书
Go中的条件语句Switch示例详解
2021/08/23 Golang
javascript遍历对象的五种方式实例代码
2021/10/24 Javascript
mapstruct的用法之qualifiedByName示例详解
2022/04/06 Java/Android
科学家测试在太空中培育人造肉,用于未来太空旅行
2022/04/29 数码科技
详解CSS中postion和opacity及cursor的特性
2022/08/14 HTML / CSS