从后端到前端之Vue(二)写个tab试试水

上一篇写了一下table,然后要写什么呢?当然是tab了。动态创建一个tab,里面放一个table,这样一个后台管理的基本功能(之一)就出来了。 好吧,这里其实只是试试水,感受一下vue的数据驱动可以怎么玩,通过一个个实例学习一下vue的各个知识点。这里要看看方法和css如何设置。 一、目标 1、  可以动态创建tab。 2、  可以切换(废话)、可以关闭tab。 3、  Css的设置。 4、  方法的处理方式。 5、  效果图 二、思路 应该有好多种方式可以实现,这里先试一个,其他的以后再说。 还是数据驱动,那么就建立一个大的数据包,把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 id =”tab” > < ul id =”ulTab” 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)” > {{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″ style =”” 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,如果增加了按钮、查询条件、分页控件,这个数据包的结构要变成多复杂呀?挖坑也不带这么挖的呀。 那么怎么办呢?下次再说。(好吧,现在还没想好,似乎要写组件,或者要用到插槽) 下集预告:会做一个tree,增加访问后端获得数据,然后绑定数的方法。

你或许想:《去原作者写文章的地方

「点点赞赏,手留余香」

    还没有人赞赏,快来当第一个赞赏的人吧!
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论