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 相关文章推荐
理解JavaScript变量作用域更轻松
Oct 25 Javascript
prototype 中文参数乱码解决方案
Nov 09 Javascript
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
Apr 04 Javascript
JS实现六位字符密码输入器功能
Aug 19 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
Aug 29 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
Feb 20 Javascript
jQuery序列化后的表单值转换成Json
Jun 16 jQuery
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
angularjs实现时间轴效果的示例代码
Nov 29 Javascript
用vue快速开发app的脚手架工具
Jun 11 Javascript
JS判断字符串是否为整数的方法--简单的正则判断
Jul 23 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
两种php调用Java对象的方法
2006/10/09 PHP
php为什么选mysql作为数据库? Mysql 创建用户方法
2007/07/02 PHP
浅析linux下apache服务器的配置和管理
2013/08/10 PHP
php模仿asp Application对象在线人数统计实现方法
2015/01/04 PHP
PHP实现路由映射到指定控制器
2016/08/13 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
js中的如何定位固定层的位置
2014/06/15 Javascript
Jquery 实现checkbox全选方法
2015/01/28 Javascript
js实现汉字排序的方法
2015/07/23 Javascript
javascript实现列表滚动的方法
2015/07/30 Javascript
jquery实现很酷的网页顶部图标下拉菜单效果
2015/08/22 Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
2015/09/16 Javascript
悬浮广告方法日常收集整理
2016/03/18 Javascript
jQuery焦点图左右转换效果
2016/12/12 Javascript
AngularJS2中一种button切换效果的实现方法(二)
2017/03/27 Javascript
JS使用Dijkstra算法求解最短路径
2019/01/17 Javascript
koa2 从入门到精通(小结)
2019/07/23 Javascript
vue获取data数据改变前后的值方法
2019/11/07 Javascript
Javascript 模拟mvc实现点餐程序案例详解
2020/12/24 Javascript
Django Highcharts制作图表
2016/08/27 Python
django反向解析和正向解析的方式
2018/06/05 Python
Flask Web开发入门之文件上传(八)
2018/08/17 Python
如何利用Boost.Python实现Python C/C++混合编程详解
2018/11/08 Python
python3.4 将16进制转成字符串的实例
2019/06/12 Python
python+OpenCV实现车牌号码识别
2019/11/08 Python
Python SSL证书验证问题解决方案
2020/01/13 Python
HTML5在a标签内放置块级元素示例代码
2013/08/23 HTML / CSS
BSTN意大利:德国街头和运动文化高品质商店
2020/12/22 全球购物
上海期货面试题
2014/01/31 面试题
大学生个人自荐信
2014/02/24 职场文书
坚定理想信念心得体会
2014/03/11 职场文书
大学生社会实践自我鉴定
2014/03/24 职场文书
社区党建工作汇报材料
2014/08/14 职场文书
关于随地扔垃圾的检讨书
2014/09/30 职场文书
使用 Docker Compose 构建复杂的多容器App
2022/04/30 Servers
Nginx 匹配方式
2022/05/15 Servers