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 相关文章推荐
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
Sep 04 Javascript
javascript中的array数组使用技巧
Jan 31 Javascript
JavaScript对象的property属性详解
Apr 01 Javascript
Jquery动态添加输入框的方法
May 29 Javascript
js基础之DOM中document对象的常用属性方法详解
Oct 28 Javascript
原生js验证简洁注册登录页面
Dec 17 Javascript
使用BootStrap进行轮播图的制作
Jan 06 Javascript
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
在Vue项目中,防止页面被缩放和放大示例
Oct 28 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
Nov 09 Javascript
javascript实现点击星星小游戏
Dec 24 Javascript
JavaScript, select标签元素左右移动功能实现
May 14 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
Windows下的PHP5.0详解
2006/11/18 PHP
在PHP中使用curl_init函数的说明
2010/11/02 PHP
destoon利用Rewrite规则设置网站安全
2014/06/21 PHP
PHP exif扩展方法开启详解
2014/07/28 PHP
PHP实现清除MySQL死连接的方法
2016/07/23 PHP
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
2010/01/15 Javascript
2010年最佳jQuery插件整理
2010/12/06 Javascript
Area 区域实现post提交数据的js写法
2014/04/22 Javascript
Javascript实现单张图片浏览
2014/12/18 Javascript
JavaScript学习笔记之数组的增、删、改、查
2016/03/23 Javascript
用jQuery获取table中行id和td值的实现代码
2016/05/19 Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
2016/05/20 Javascript
JavaScript Promise 用法
2016/06/14 Javascript
js实现定时进度条完成后切换图片
2017/01/04 Javascript
原生js实现淘宝购物车功能
2020/06/23 Javascript
jquery表单插件form使用方法详解
2017/01/20 Javascript
nodejs个人博客开发第三步 载入页面
2017/04/12 NodeJs
angularJs中datatable实现代码
2017/06/03 Javascript
jQuery常用选择器详解
2017/07/17 jQuery
layui 富文本编辑器和textarea值的相互传递方法
2019/09/18 Javascript
使用Vue实现调用接口加载页面初始数据
2019/10/28 Javascript
Python中设置变量访问权限的方法
2015/04/27 Python
Python中遇到的小问题及解决方法汇总
2017/01/11 Python
Python读取txt某几列绘图的方法
2018/10/14 Python
Python实现的服务器示例小结【单进程、多进程、多线程、非阻塞式】
2019/05/23 Python
分享8点超级有用的Python编程建议(推荐)
2019/10/13 Python
关于torch.optim的灵活使用详解(包括重写SGD,加上L1正则)
2020/02/20 Python
mac 上配置Pycharm连接远程服务器并实现使用远程服务器Python解释器的方法
2020/03/19 Python
python3 通过 pybind11 使用Eigen加速代码的步骤详解
2020/12/07 Python
深入解析HTML5使用SVG图像时的viewBox属性用法
2015/09/02 HTML / CSS
皮尔·卡丹巴西官方商店:Pierre Cardin
2017/07/21 全球购物
《再见了,亲人》教学反思
2014/02/26 职场文书
推广普通话演讲稿
2014/05/23 职场文书
大学生党员批评与自我批评
2014/09/28 职场文书
幼儿园教师工作总结2015
2015/04/02 职场文书
2016年“12.4”法制宣传日活动总结
2016/04/01 职场文书