目标:用标签页组件实现点击不同标签显示表格内容,标签页内lab le 和表格数据都是循环得到的。
效果如图:
首先 实现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 数据了