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支持min-width和max-width的方法
Jun 25 Javascript
javascript权威指南 学习笔记之javascript数据类型
Sep 24 Javascript
高效的获取当前元素是父元素的第几个子元素
Oct 15 Javascript
使用js判断数组中是否包含某一元素(类似于php中的in_array())
Dec 12 Javascript
浅谈JavaScript Math和Number对象
Jan 26 Javascript
Javascript基于AJAX回调函数传递参数实例分析
Dec 15 Javascript
JavaScript记录光标在编辑器中位置的实现方法
Apr 22 Javascript
jQuery UI Bootstrap是什么?
Jun 17 Javascript
浅谈Vue SPA 首屏加载优化实践
Dec 15 Javascript
AngularJS中的作用域实例分析
May 16 Javascript
JS如何实现动态添加的元素绑定事件
Nov 12 Javascript
JavaScript大数相加相乘的实现方法实例
Oct 18 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分页代码学习示例分享
2014/02/20 PHP
php版本的cron定时任务执行器使用实例
2014/08/19 PHP
php截取中文字符串函数实例
2015/02/23 PHP
谈谈php对接芝麻信用踩的坑
2016/12/01 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
asp(javascript)全角半角转换代码 dbc2sbc
2009/08/06 Javascript
XENON基于JSON变种
2010/07/27 Javascript
onsubmit阻止form表单提交与onclick的相关操作
2010/09/03 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
2013/12/16 Javascript
js使用for循环与innerHTML获取选中tr下td值
2014/09/26 Javascript
javascript的函数作用域
2014/11/12 Javascript
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
2016/07/07 Javascript
Bootstrap中表单控件状态(验证状态)
2016/08/04 Javascript
vue-cli 自定义指令directive 添加验证滑块示例
2017/10/19 Javascript
webpack项目调试以及独立打包配置文件的方法
2018/02/28 Javascript
vue路由懒加载的实现方法
2018/03/12 Javascript
javascript for循环性能测试示例
2019/08/07 Javascript
微信小程序实现滚动加载更多的代码
2019/12/06 Javascript
你知道JavaScript Symbol类型怎么用吗
2020/01/08 Javascript
js实现表单项的全选、反选及删除操作示例
2020/06/05 Javascript
python类继承用法实例分析
2014/10/10 Python
深入浅析Python字符编码
2015/11/12 Python
Python爬虫_城市公交、地铁站点和线路数据采集实例
2018/01/10 Python
python控制windows剪贴板,向剪贴板中写入图片的实例
2018/05/31 Python
python脚本实现验证码识别
2018/06/07 Python
解决python测试opencv时imread导致的错误问题
2019/01/26 Python
tensorflow实现从.ckpt文件中读取任意变量
2020/05/26 Python
Ubuntu20下的Django安装的方法步骤
2021/01/24 Python
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
2014/08/08 HTML / CSS
个人找工作的自我评价
2013/10/17 职场文书
大学生职业生涯规划书模版
2013/12/30 职场文书
水利局群众路线专题民主生活会发言材料
2014/09/21 职场文书
党风廉正建设责任书
2015/01/29 职场文书
大足石刻导游词
2015/02/02 职场文书
2015年化妆品销售工作总结
2015/05/11 职场文书
生死抉择观后感
2015/06/09 职场文书