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 数据了

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,098评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,213评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,960评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,519评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,512评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,533评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,914评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,574评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,804评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,563评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,644评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,350评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,933评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,908评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,146评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,847评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,361评论 2 342

推荐阅读更多精彩内容

  • 标签页组件,即实现选项卡切换,常用于平级内容的收纳与展示。 因为每个标签页的内容是由使用组件的父级控制的,即这部分...
    deniro阅读 2,367评论 0 12
  • 好久没有写文章了,这一段时间在忙着准备期末考试和找实习,上周已经在一家公司开始实习了,公司是用Vue开发项目,Bo...
    Billy_d972阅读 3,622评论 0 0
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,224评论 1 41
  • 麦小布阅读 294评论 0 0
  • 假如有这么一个问题,1瓶汽水1块钱,2个空瓶可以兑换一瓶汽水,问n块钱可以兑换多少瓶汽水? 考虑整个过程就是用空瓶...
    mysimplebook阅读 1,069评论 0 0