当前位置：文江博客话题详情

vue element tabs 动态渲染问题

发布于 2022-09-13 01:04:19 字数 741 浏览 10 评论 0

    <el-tabs v-model="activeName1" ref="tabsRef" @tab-click="handleTesttab">
      <el-tab-pane  v-for="(item,index) in publicdata" :key="index"  :name="item.label" lazy>

        <span slot="label">{{ item.label }}
          <!-- <el-badge v-if="isDisplay" :value="item.children.length"></el-badge> -->
        </span>
        <div class="indiv"  v-for="(item1,index) in item.children"  :key="index">
          <el-button type="primary" style="margin-top:10px"   @click="clickPublicData(item1)">{{item1.label}}</el-button>
        </div>
      </el-tab-pane>
    </el-tabs>

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（2）

落墨 2022-09-20 01:04:19

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
     <el-tabs v-model="activeName1"  ref="tabsRef" @tab-click="handleTesttab">
      <el-tab-pane  v-for="(item,index) in publicdata" :key="index" :label="item.label" :name="item.label">
        <div class="indiv"  v-for="(item1,index) in item.children"  :key="index">
          <el-button type="primary" style="margin-top:10px"   @click="clickPublicData(item1)">{{item1.label}}</el-button>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return { 
                    activeName1: "tab2",
                    publicdata: [{
                        label: "tab1",
                        children: [{
                            label: "第一个Tab"
                        }],
                    },{
                        label: "tab2",
                        children: [{
                            label: "第二个Tab"
                        }],
                    },{
                        label: "tab3",
                        children: [
                            {
                            label: "第三个Tab"
                        }
                        ],
                    }]
                }
      },
            methods: {
                handleTesttab(tab, event) {
                    console.log(tab, event);
                },
                clickPublicData(item) {
                    console.log(item)
                }
        }
    })
  </script>
</html>

看起来没问题啊

遮云壑 2022-09-20 01:04:19

我猜你的activeName1和item.label根本对应不上

~没有更多了~

关于作者

成熟稳重的好男人

暂无简介

0 文章

0 评论

785 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

yili302

文章 0 评论 0

晚霞

文章 0 评论 0

LLFFCC

文章 0 评论 0

陌路黄昏

文章 0 评论 0

xiaohuihui

文章 0 评论 0

你与昨日

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文