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

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

2.png

首先 实现pane 循环出header。 v-model="tabKey"是指默认选中首页，
abel="" name=""， :key="" 是循环出数据必不可少的，

 <el-tabs v-model="tabKey">
 <el-tab-pane 
  v-for="title in header"
 :label="title.title" 
 :name="title.key" 
 :key="title.key" 
   </el-tab-pane>
    </el-tabs>
    tabKey:'namekey',
      header:[
    {title:'首页',key:'agekey'},
    {title:'全部',key:'namekey'},
    {title:'设置',key:'sixkey'},

  ],

接下来在<el-tab-pane >嵌套表格

html:

     <el-table :data="agekey">

     <el-table-column label="姓名" prop="name"></el-table-column>
     <el-table-column label="性别" prop="six"></el-table-column>
     <el-table-column label="年龄" prop="age"></el-table-column>
  </el-table>

script:

    agekey:[{
    id:'001',
    name:'汤姆',
    six:'man',
    age:'18'
     }]

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