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 相关文章推荐
推荐:极酷右键菜单
Nov 29 Javascript
jQuery模拟超链接点击效果代码
Apr 21 Javascript
javascript分页代码实例分享(js分页)
Dec 13 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
Jul 27 Javascript
程序员必知35个jQuery 代码片段
Nov 05 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
Jul 18 Javascript
JavaScript实现form表单的多文件上传
Mar 27 Javascript
微信小程序动态增加按钮组件
Sep 14 Javascript
脚手架vue-cli工程webpack的作用和特点
Sep 29 Javascript
微信小程序自定义toast组件的方法详解【含动画】
May 11 Javascript
vue遍历生成的输入框 绑定及修改值示例
Oct 30 Javascript
微信js-sdk 录音功能的示例代码
Nov 01 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里的JS打印函数
2006/10/09 PHP
php中防止伪造跨站请求的小招式
2011/09/02 PHP
PHP gbk环境下json_dencode传送来的汉字
2012/11/13 PHP
smarty实现多级分类的方法
2014/12/05 PHP
七种PHP开发环境搭建工具
2020/06/28 PHP
JavaScript面向对象之体会[总结]
2008/11/13 Javascript
iframe如何动态创建及释放其所占内存
2014/09/03 Javascript
JS应用正则表达式转换大小写示例
2014/09/18 Javascript
浅谈javascript的调试
2015/01/28 Javascript
实现无刷新联动例子汇总
2015/05/20 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
2015/06/19 Javascript
js实现网页多级级联菜单代码
2015/08/20 Javascript
Angularjs全局变量被作用域监听的正确姿势
2016/02/06 Javascript
探讨:JavaScript ECAMScript5 新特性之get/set访问器
2016/05/05 Javascript
jQuery和JavaScript节点插入元素的方法对比
2016/11/18 Javascript
JS实现留言板功能
2017/06/17 Javascript
React实现全局组件的Toast轻提示效果
2018/09/21 Javascript
JS面试题大坑之隐式类型转换实例代码
2018/10/14 Javascript
Vue.js 中的 v-model 指令及绑定表单元素的方法
2018/12/03 Javascript
详解Node.js amqplib 连接 Rabbit MQ最佳实践
2019/01/24 Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
2019/04/09 Javascript
vue 进阶之实现父子组件间的传值
2019/04/26 Javascript
[00:30]塑造者的传承礼包-戴泽“暗影之焰”套装展示视频
2014/04/04 DOTA
浅谈python中copy和deepcopy中的区别
2017/10/23 Python
将pip源更换到国内镜像的详细步骤
2019/04/07 Python
Python Django 页面上展示固定的页码数实现代码
2019/08/21 Python
python3应用windows api对后台程序窗口及桌面截图并保存的方法
2019/08/27 Python
flask 实现上传图片并缩放作为头像的例子
2020/01/09 Python
Python Selenium参数配置方法解析
2020/01/19 Python
pycharm开发一个简单界面和通用mvc模板(操作方法图解)
2020/05/27 Python
Django如何在不停机的情况下创建索引
2020/08/02 Python
品质主管的岗位职责
2013/12/04 职场文书
教师个人剖析材料
2014/02/05 职场文书
群众路线教育党员自我剖析材料
2014/10/06 职场文书
2014年文员工作总结
2014/11/18 职场文书
2016年万圣节活动总结
2016/04/05 职场文书