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 相关文章推荐
让广告代码不再影响你的网页加载速度
Jul 07 Javascript
JavaScript限定图片显示大小的方法
Mar 11 Javascript
jQuery常用知识点总结以及平时封装常用函数
Feb 23 Javascript
详解jQuery中ajax.load()方法
Jan 25 Javascript
import与export在node.js中的使用详解
Sep 28 Javascript
对angular2中的ngfor和ngif指令嵌套实例讲解
Sep 12 Javascript
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
Flutter实现仿微信底部菜单栏功能
Sep 18 Javascript
浅谈Layui的eleTree树式选择器使用方法
Sep 25 Javascript
vuex实现像调用模板方法一样调用Mutations方法
Nov 06 Javascript
基于原生js实现九宫格算法代码实例
Jul 03 Javascript
vue导入.md文件的步骤(markdown转HTML)
Dec 31 Vue.js
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
php4的彩蛋
2006/10/09 PHP
php-cli简介(不会Shell语言一样用Shell)
2013/06/03 PHP
PHP判断是否微信访问的方法示例
2019/03/27 PHP
PHP面向对象程序设计之对象的遍历操作示例
2019/06/12 PHP
基于jQuery的弹出框插件
2012/03/18 Javascript
js实现点小图看大图效果的思路及示例代码
2013/10/28 Javascript
JavaScript实现SHA-1加密算法的方法
2015/03/11 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
2015/06/01 Javascript
jquery实现表单验证简单实例演示
2015/11/23 Javascript
日常收集整理的JavaScript常用函数方法
2015/12/10 Javascript
使用Angular.js实现简单的购物车功能
2016/11/21 Javascript
JS实现页面打印功能
2017/03/16 Javascript
js中时间格式化的几种方法
2018/07/22 Javascript
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
2018/08/24 Javascript
前端防止用户重复提交js实现代码示例
2018/09/07 Javascript
Node使用Selenium进行前端自动化操作的代码实现
2019/10/10 Javascript
Python实现冒泡,插入,选择排序简单实例
2014/08/18 Python
详解Python中的type()方法的使用
2015/05/21 Python
python删除过期文件的方法
2015/05/29 Python
Python设计足球联赛赛程表程序的思路与简单实现示例
2016/06/28 Python
Python使用PDFMiner解析PDF代码实例
2017/03/27 Python
python删除列表元素的三种方法(remove,pop,del)
2019/07/22 Python
解决pyqt5异常退出无提示信息的问题
2020/04/08 Python
Python lambda表达式原理及用法解析
2020/08/18 Python
PyTorch中Tensor的数据类型和运算的使用
2020/09/03 Python
python中time、datetime模块的使用
2020/12/14 Python
现代家居用品及礼品:LBC Modern
2018/06/24 全球购物
数据库测试通常都包括哪些方面
2015/11/30 面试题
资产评估专业学生的自我鉴定
2013/11/14 职场文书
幼儿园中班上学期评语
2014/04/18 职场文书
酒店总经理岗位职责范本
2014/08/08 职场文书
小学母亲节活动总结
2015/02/10 职场文书
超强台风观后感
2015/06/09 职场文书
2016年学习贯彻十八届五中全会精神心得体会
2016/01/05 职场文书
Pytorch可视化的几种实现方法
2021/06/10 Python
mysql查看表结构的三种方法总结
2022/07/07 MySQL