vue element tabs 动态渲染问题

    <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>

阅读 4.5k

<!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>

看起来没问题啊

vue element tabs 动态渲染问题

你尚未登录，登录后可以

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

vue2.6，打包后app.js，8M,chunk.js，6M，加载打开页面很慢，有什么办法减少，打开页面快一些？

Element Plus表格组件如何呈现复杂布局如图？

多个vue项目，后台接口都是一样的，每个vue项目的同一个页面都只是一小部分修改，怎样把公共的代码提出来复用？

如何实现从一个div中拖拽dom到另一个div容器？

electron如何屏蔽鼠标上的前进后退快捷键？