vue 循环tabs 标签页 组件_vue学习笔记--v-for循环标签页label并实现根据不同label表格切换...

目标：用标签页组件实现点击不同标签显示表格内容，标签页内lab le 和表格数据都是循环得到的。

效果如图：

2.png

首先 实现pane 循环出header。 v-model="tabKey"是指默认选中首页，

abel="" name=""， :key="" 是循环出数据必不可少的，

v-for="title in header"

:label="title.title"

:name="title.key"

:key="title.key"

tabKey:'namekey',

header:[

{title:'首页',key:'agekey'},

{title:'全部',key:'namekey'},

{title:'设置',key:'sixkey'},

],

接下来在嵌套表格

html:

script:

agekey:[{

id:'001',

name:'汤姆',

six:'man',

age:'18'

}]

到这一步，已经实现了点击标签页能显示表格数据的程度了，但是这里显示的数据并不是不一样，还需要进一步改造data数据，使 绑定数据的时候对应不同的key:' ' ,这样就可以实现点击不同的标签显示不同的ta b le 数据了