VUE前后端学习tab写法实例


Posted in Javascript onAugust 06, 2019

动态创建一个tab,里面放一个table,这样一个后台管理的基本功能(之一)就出来了。

好吧,这里其实只是试试水,感受一下vue的数据驱动可以怎么玩,通过一个个实例学习一下vue的各个知识点。这里要看看方法和css如何设置。

一、目标

1、  可以动态创建tab。

2、  可以切换(废话)、可以关闭tab。

3、  Css的设置。

4、  方法的处理方式。

5、  效果图

 VUE前后端学习tab写法实例

二、思路

应该有好多种方式可以实现,这里先试一个,其他的以后再说。

还是数据驱动,那么就建立一个大的数据包,把tab信息和table信息都放进去,然后绑定就好了。似乎不是太难的样子。Emmmmmm大概是吧。

Tab切换,暂时使用css的方式来控制。

关闭tab,就是干掉对应的数据。

三、设计与编码 1.    数据包

var tab = new Vue({
    el: '#tab',
    data: {
      tabNumber: 1,    //标签数量,这个是临时的,便于自动重新绑定
      currentTabId: 1,  //当前激活的tab的id
      beforeTabId: 1,   //上一个被激活的tab的id
      tabs: {
        tab1: { //可以有多个标签,这里先默认一个tab
          id: "1", //标签识别标示
          title: "我的桌面",
          isShow:true,    //是否显示
          message: '桌面',
          orderBy: [], //可以控制字段的先后顺序,想调整列的先后顺序,改这个数组就行,可以做个性化设置
          tableTh: {}, //表头的描述信息
          dataList: [] //数据包,字段名作为关键字,便于列的调整先后顺序
        }
      }
    },
    methods: {
      tabClick: function (id) {
        //切换tab
        //alert("切换tab" + id);
        //隐藏当前的tab
        var oldId = tab.currentTabId; //记录切换前tab的id
        tab.beforeTabId = oldId;
        tab.tabs["tab" + oldId].isShow = false; //隐藏切换前的tab

        tab.currentTabId = id; //记录切换后的id
        tab.tabs["tab" + id].isShow = true; //显示切换后的tab
   
      },
      closeTab: function (id) {
        if (id === "1") {
          alert("这是桌面,建议不要关闭哦:)");
          return;
        }
        
        delete tab.tabs["tab" + id]; //这种方式不会被vue监控到,所以不会触发视图的刷新
        tab.tabNumber = tab.tabNumber - 1; //这样子凑合一下。触发视图的刷新

        //设置“激活”状态
        var oldId = tab.beforeTabId; //上一个激活tab
        var nowId = tab.currentTabId; //现在激活tab

        if (nowId === id) {
          //关掉的是激活tab,需要设置上一个tab为激活状态
          tab.currentTabId = oldId;
          tab.tabs["tab" + oldId].isShow = true; //这么写好像可以触发视图的刷新
          tab.beforeTabId = 1;
        }
        else if (oldId === id) {
          //关闭的是上一个激活tab,修改前一个tab的id
          tab.beforeTabId = 1;
           
        }else {
          //需要强制修改一下,否则不会刷新,emmm,好吧还是没自动刷新
          tab.currentTabId = nowId;
        }
       }
    }
});

 methods 这个也是一个保留字(关键字),就是放方法的。里面可以有多个方法,方法名称和标签里的v-on:XXXX='00000' 对应。

这里写了两个方法,一个是切换tab的,一个是关闭tab的。

切换tab:按照数据驱动视图的思路,在方法里面改变数据的isShow 属性值,然后通过模板的设置来实现切换效果。

关闭tab:干掉对应的数据即可,只是实现的时候遇到点小问题,delele的方式不能被监控,到时视图不能及时更新,所以加了一个tab数量的属性,关掉一个tab,数量-1,这样数据变化就可以被监控到了,然后一起重新绑定。

 2.    模板

<div>
  <!--tab标签-->
  <ul class="tabs left">
    <li v-for="t in tabs" v-bind:class="{'selectTag':t.isShow}">
      <a v-on:click="tabClick(t.id)" href="javascript:void(0)" rel="external nofollow" > {{t.title}} 
        <em class="arrup" v-on:click.stop="closeTab(t.id)">x</em>
      </a>
    </li>
  </ul>

  <div v-for="t in tabs" v-show="t.isShow">
    {{ t.message }}{{tabNumber}}
    <table class="table_default1" v-show="t.message!=='桌面'">
      <tr>
        <th>序号</th>
        <th v-for="key in t.orderBy">
          {{t.tableTh[key].title}}
        </th>
      </tr>
      <tr v-for="(tr,i) in t.dataList">
        <td>{{i+1}}</td>
        <td v-for="index in t.orderBy" v-bind:align="t.tableTh[index].align">
          {{tr[index]}}
        </td>

      </tr>
    </table>
  </div>
</div>

 切换tab

用v-show的方法来控制div是否显示。

v-show是通过修改style的属性来实现的。

用v-bind:class="{'selectTag':t.isShow}" 的方式来实现tab的激活效果。

v-bind:class 可以绑定css名称。因为css名称总是要被换来换去的,所以vue就很贴心的提供了这种if true 才设置的方式,冒号后面为真,才会设置设个css名称,这样数据驱动的时候就方便多了。

 四、运行效果

调试了半天,好吧上年纪了,思维不够敏捷,这么点逻辑问题就卡住了,哎。

不过最后还是调试成功了。

五、总结

这个有一个明显的问题,这个数据包是不是有点大,创建的tab越多,数据包就越大,有没有性能问题?会不会卡?

另外这还只是table,如果增加了按钮、查询条件、分页控件,这个数据包的结构要变成多复杂呀?挖坑也不带这么挖的呀。

那么怎么办呢?下次再说。(好吧,现在还没想好,似乎要写组件,或者要用到插槽)感谢大家对三水点靠木的支持。

Javascript 相关文章推荐
js 分栏效果实现代码
Aug 29 Javascript
Mootools 1.2教程(2) DOM选择器
Sep 14 Javascript
window.onbeforeunload方法在IE下无法正常工作的解决办法
Jan 23 Javascript
JavaScript中String和StringBuffer的速度之争
Apr 01 Javascript
JS面向对象编程 for Cookie
Sep 19 Javascript
js调用后台、后台调用前台等方法总结
Apr 17 Javascript
jquery之别踩白块游戏的简单实现
Jul 25 Javascript
JS仿淘宝搜索框用户输入事件的实现
Jun 19 Javascript
浅谈函数调用的不同方式,以及this的指向
Sep 17 Javascript
vue实现行列转换的一种方法
Aug 06 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
Sep 20 Javascript
webpack+vue.js构建前端工程化的详细教程
May 10 Javascript
Vue路由前后端设计总结
Aug 06 #Javascript
vue实现行列转换的一种方法
Aug 06 #Javascript
微信小程序点餐系统开发常见问题汇总
Aug 06 #Javascript
详解使用WebPack搭建React开发环境
Aug 06 #Javascript
vue-cli3+typescript新建一个项目的思路分析
Aug 06 #Javascript
Vue 中可以定义组件模版的几种方式
Aug 06 #Javascript
angularjs请求数据的方法示例
Aug 06 #Javascript
You might like
分页显示Oracle数据库记录的类之一
2006/10/09 PHP
关于mysql 字段的那个点为是定界符
2007/01/15 PHP
php下载文件的代码示例
2012/06/29 PHP
PHP命名空间(namespace)的动态访问及使用技巧
2014/08/18 PHP
PHP接口并发测试的方法(推荐)
2016/12/15 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
PHP开启目录引索+fancyindex漂亮目录浏览带搜索功能
2019/09/23 PHP
jQuery事件绑定.on()简要概述及应用
2013/02/07 Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
2013/03/11 Javascript
JS实现淘宝幻灯片效果的实现方法
2013/03/22 Javascript
怎么通过onclick事件获取js函数返回值(代码少)
2015/07/28 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
2015/11/29 Javascript
js显示动态时间的方法详解
2016/08/20 Javascript
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
2016/09/28 Javascript
js中作用域的实例解析
2017/03/16 Javascript
jQuery实现表格的增、删、改操作示例
2019/01/27 jQuery
Vue+iview+webpack ie浏览器兼容简单处理
2019/09/20 Javascript
JS实现移动端双指缩放和旋转方法
2019/12/13 Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
2020/10/13 Javascript
python构造icmp echo请求和实现网络探测器功能代码分享
2014/01/10 Python
python分割文件的常用方法
2014/11/01 Python
python调用摄像头显示图像的实例
2018/08/03 Python
python 中的列表生成式、生成器表达式、模块导入
2019/06/19 Python
python GUI库图形界面开发之PyQt5表格控件QTableView详细使用方法与实例
2020/03/01 Python
浅谈Python协程
2020/06/17 Python
布里斯班女装时尚品牌:Adrift
2017/12/28 全球购物
基督教卡片、励志礼品、家居装饰等:DaySpring
2018/10/12 全球购物
类和结构的区别
2012/08/15 面试题
介绍一下如何优化MySql
2016/12/20 面试题
五十岁生日宴会答谢词
2014/01/15 职场文书
技术比武方案
2014/05/19 职场文书
军训结束新闻稿
2015/07/17 职场文书
python办公自动化之excel的操作
2021/05/23 Python
vue项目如何打包之项目打包优化(让打包的js文件变小)
2022/04/30 Vue.js
MySQL数据库实验之 触发器和存储过程
2022/06/21 MySQL
postgresql中如何执行sql文件
2023/05/08 PostgreSQL