前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >element-ui 标签页(循环遍历)

element-ui 标签页(循环遍历)

作者头像
用户4344670
发布2019-08-28 11:07:28
5.3K0
发布2019-08-28 11:07:28
举报
文章被收录于专栏:vue的实战vue的实战

代码语言:javascript
复制
  <div class="box3">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane :label="textShow + '默认'" name="first">用户管理</el-tab-pane>
        <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
        <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
        <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
      </el-tabs>
    </div>


  activeName: 'first', // 当前的标签页---通过数据绑定 决定进来是哪一个标签页
  textShow: "文字文字",

  handleClick(tab, event) {
        // console.log(tab, event);
        console.log(tab.index); /// 获得唯一的index
      },
  • 绑定label 文字显示

循环标签页
代码语言:javascript
复制
   <el-tab-pane v-for = "item in array" :label="item.text" :name="item.name" >{{item.con}}</el-tab-pane>
/// 标签的数据
   array: [
          {
            text: "管理1",
            con: "内容1",
            name: "first"
          }, {
            text: "管理2",
            con: "内容2",
            name: "second"
          },
          {
            text: "管理3",
            con: "内容3",
            name: "third"
          }
        ],

循环遍历的标签页.png

注意事项:

  • 属性中使用了item 不用{{}}
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019.04.30 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 循环标签页
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档