动态创建一个选项卡中,里面放一个桌子,这样一个后台管理的基本功能之(一)就出来了。
好吧,这里其实只是试试水,感受一下vue的数据驱动可以怎么玩,通过一个个实例学习一下vue的各个知识点。这里要看看方法和css如何设置。
<强>一、目标
1,,可以动态创建选项卡。
2,,可以切换(废话),可以关闭标签。
3,,Css的设置。
4,,方法的处理方式。
5,,效果图
, 
<强>二,思路
应该有好多种方式可以实现,这里先试一个,其他的以后再说。
还是数据驱动,那么就建立一个大的数据包,把选项卡信息和表信息都放进去,然后绑定就好了。似乎不是太难的样子.Emmmmmm大概是吧。
选项卡切换,暂时使用css的方式来控制。
关闭标签,就是干掉对应的数据。
<强>三、设计与编码1只,,数据包
var标签=new Vue ({
埃尔:“#标签”,
数据:{
tabNumber: 1、//标签数量,这个是临时的,便于自动重新绑定
currentTabId: 1、//当前激活的选项卡的id
beforeTabId: 1、//上一个被激活的选项卡的id
标签:{
tab1:{//可以有多个标签,这里先默认一个选项卡
id: " 1 ",//标签识别标示
标题:“我的桌面”,
isShow:真的,//是否显示
消息:“桌面”,
orderBy:[],//可以控制字段的先后顺序,想调整列的先后顺序,改这个数组就行,可以做个性化设置
tableTh:{},//表头的描述信息
dataList:[]//数据包,字段名作为关键字,便于列的调整先后顺序
}
}
},
方法:{
tabClick:函数(id) {//切换标签//警报(“切换标签”+ id);//隐藏当前的选项卡
var oldId=tab.currentTabId;//记录切换前选项卡的id
选项卡。beforeTabId=oldId;
选项卡。标签(“选项卡”+ oldId)。isShow=false;//隐藏切换前的选项卡
选项卡。currentTabId=id;//记录切换后的id
选项卡。标签(“选项卡”+ id)。isShow=true;//显示切换后的选项卡
},
closeTab:函数(id) {
如果(id===?”) {
警报(“这是桌面,建议不要关闭哦:”);
返回;
}
删除选项卡。标签(“选项卡”+ id);//这种方式不会被vue监控到,所以不会触发视图的刷新
选项卡。tabNumber=选项卡。tabNumber - 1;//这样子凑合一下。触发视图的刷新//设置“激活”状态
var oldId=tab.beforeTabId;//上一个激活选项卡
var nowId=tab.currentTabId;//现在激活选项卡
如果(nowId===id) {//关掉的是激活选项卡,需要设置上一个选项卡为激活状态
选项卡。currentTabId=oldId;
选项卡。标签(“选项卡”+ oldId)。isShow=true;//这么写好像可以触发视图的刷新
选项卡。beforeTabId=1;
}
else if (oldId===id) {//关闭的是上一个激活选项卡,修改前一个选项卡的id
选项卡。beforeTabId=1;
其他}{//需要强制修改一下,否则不会刷新,emmm,好吧还是没自动刷新
选项卡。currentTabId=nowId;
}
}
}
});
,这方法个也是一个保留字(关键字),就是放方法的。里面可以有多个方法,方法名称和标签里的v: XXXX=' 00000 '对应。
这里写了两个方法,一个是切换标签的,一个是关闭标签的。
切换标签:按照数据驱动视图的思路,在方法里面改变数据的isShow属性值,然后通过模板的设置来实现切换效果。
关闭标签:干掉对应的数据即可,只是实现的时候遇到点小问题,delele的方式不能被监控,到时视图不能及时更新,所以加了一个标签数量的属性,关掉一个选项卡中,数量1,这样数据变化就可以被监控到了,然后一起重新绑定。
, 2只,,模板
& lt; div>
& lt; !——标签标签——比;
& lt; ul类="标签左”比;
标签& lt;李v=皌”v-bind: class=" {selectTag: t.isShow}”在
& lt; v:点击=" tabClick t.id " href=" javascript:无效(0)”rel=巴獠縩ofollow”比;{{t.title}},,
& lt;电磁类=" arrup " v: click.stop=癱loseTab (t.id)”祝辞x
& lt;/a>
& lt;/li>
& lt;/ul>
标签& lt; div)=皌”v-show=皌.isShow”比;
{{t。消息}}{{tabNumber}}
& lt;表类=皌able_default1 v-show”=皌.message !==白烂妗薄氨?
& lt; tr>
& lt; th>序号& lt;/th>
t.orderBy & lt; th)=肮丶北?
{{t.tableTh(例子).title}}
& lt;/th>
& lt;/tr>
& lt; tr v=" (tr) t.dataList”比;
& lt; td> {{i + 1}} & lt;/td>
& lt; td v="指数t。orderBy“v-bind:="对齐t.tableTh(指数). align”比;
{{tr(指数)}}
& lt;/td>
& lt;/tr>
& lt;/table>
& lt;/div>
& lt;/div>
