element-ui 标签页（循环遍历）

---

代码语言：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 不用{{}}

label png 遍历

0 人点赞