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鼠标划过切换效果
Jun 30 Javascript
javaScript使用EL表达式的几种方式
May 27 Javascript
全面了解addEventListener和on的区别
Jul 14 Javascript
快速实现jQuery多级菜单效果
Feb 01 Javascript
jquery加载单文件vue组件的方法
Jun 20 jQuery
js禁止Backspace键使浏览器后退的实现方法
Sep 01 Javascript
ECMAScript6变量的解构赋值实例详解
Sep 19 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
Feb 22 Javascript
JS使用数组实现的队列功能示例
Mar 04 Javascript
JavaScript实现省份城市的三级联动
Feb 11 Javascript
Vue指令实现OutClick的示例
Nov 16 Javascript
Javascript实现关闭广告效果
Jan 29 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基于GD库画五星红旗的方法
2015/02/24 PHP
js函数的引用, 关于内存的开销
2012/09/17 Javascript
jquery插件jquery倒计时插件分享
2013/12/27 Javascript
JavaScript按位运算符的应用简析
2014/02/04 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
2015/02/04 Javascript
js获取滚动距离的方法
2015/05/30 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
2015/08/19 Javascript
JavaScript的removeChild()函数用法详解
2015/12/27 Javascript
原生js实现放大镜特效
2017/03/08 Javascript
JavaScript数据结构之二叉树的查找算法示例
2017/04/13 Javascript
微信小程序实现的动态设置导航栏标题功能示例
2019/01/31 Javascript
AJAX XMLHttpRequest对象创建使用详解
2020/08/20 Javascript
python中pycurl库的用法实例
2014/09/30 Python
Python解决鸡兔同笼问题的方法
2014/12/20 Python
Python list操作用法总结
2015/11/10 Python
编写Python小程序来统计测试脚本的关键字
2016/03/12 Python
python多线程方式执行多个bat代码
2016/06/07 Python
python爬虫实现教程转换成 PDF 电子书
2017/02/19 Python
Python实现时钟显示效果思路详解
2018/04/11 Python
PyGame贪吃蛇的实现代码示例
2018/11/21 Python
获取django框架orm query执行的sql语句实现方法分析
2019/06/20 Python
python3 自动识别usb连接状态,即对usb重连的判断方法
2019/07/03 Python
Django中URL的参数传递的实现
2019/08/04 Python
使用python实现男神女神颜值打分系统(推荐)
2019/10/31 Python
django 简单实现登录验证给你
2019/11/06 Python
在Python中使用MongoEngine操作数据库教程实例
2019/12/03 Python
联想中国官方商城:Lenovo China
2017/10/18 全球购物
俄罗斯首家面向中国消费者的一站式购物网站:Wruru
2020/05/08 全球购物
市场营销专业毕业生自荐信
2013/11/02 职场文书
物流毕业生个人的自我评价
2014/02/13 职场文书
高职教师先进事迹材料
2014/08/24 职场文书
本科毕业论文指导教师评语
2014/12/30 职场文书
酒店办公室主任岗位职责
2015/04/01 职场文书
2016年教师节慰问信
2015/12/01 职场文书
python基础之函数的定义和调用
2021/10/24 Python
CSS文本阴影 text-shadow 悬停效果详解
2022/05/25 HTML / CSS