问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何将element-ui中的tab组件默认展示的tab标签数量改掉？

头像
11111学习
    1081380

    默认四个。我通过动态绑定循环出标签，但是只会展示出四个，到第四个后不断更新第四个标签而不增加标签，怎么修改掉默认展示标签数量呢？
    image.png

    <el-tabs @tab-click="handleClick">
        <el-tab-pane v-for="(item, index) in allData" :key="index" :label="tabList[index].station">
        <tableReuse :datalist="item.data" :titlelist="item.title"></tableReuse>
      </el-tab-pane>
    </el-tabs>
    前端vue.jselement-ui
    阅读 2.1k
    avatarAI BotBETA

    可以通过设置element-ui的tab组件的tab-position属性来改变默认展示的标签数量。这个属性决定了标签栏的位置和排列方式。默认值为top，表示标签栏在顶部水平排列，可以将它改为left或right来实现纵向排列。这样就可以展示更多的标签了。

    <el-tabs tab-position="left">
  <!-- 在这里循环生成标签 -->
  <el-tab-pane label="标签1">内容1</el-tab-pane>
  <el-tab-pane label="标签2">内容2</el-tab-pane>
  <el-tab-pane label="标签3">内容3</el-tab-pane>
  <el-tab-pane label="标签4">内容4</el-tab-pane>
  <el-tab-pane label="标签5">内容5</el-tab-pane>
  <!-- 更多的标签... -->
</el-tabs>

    如果你仍然想要水平排列的标签栏，但是想展示更多的标签，你可以使用tab-list属性来自定义标签栏的内容，这样就可以自由控制标签的数量了。

    <el-tabs>
  <template #tab-list>
    <!-- 在这里循环生成标签 -->
    <el-tab-pane label="标签1">内容1</el-tab-pane>
    <el-tab-pane label="标签2">内容2</el-tab-pane>
    <el-tab-pane label="标签3">内容3</el-tab-pane>
    <el-tab-pane label="标签4">内容4</el-tab-pane>
    <el-tab-pane label="标签5">内容5</el-tab-pane>
    <!-- 更多的标签... -->
  </template>
</el-tabs>

    这样，你可以循环生成任意数量的标签，并且不会受到默认展示标签数量的限制。

    4 个回答
    得票最新
    头像
    XiongMiao
      6261315
      头像
      光影星宸
        784

        贴一下代码呗

        头像
        Eraser
          20810

          vue2啊，看这情况像是数组的操作问题，动态绑定的allData数组是怎么赋值更新的呢

          头像
          前端搬运工
            7421519

            <el-tabs @tab-click="handleClick">

                <el-tab-pane v-for="(item, index) in allData" :key="index" :label="tabList[index].station">
  </el-tab-pane>

            </el-tabs>

            你el-tab循环的是allData,但是label动态获取的是tabList中的station,如果allData中的值只有4个，你的index最多就是3，所以在tabList中最多取第三个下标对应的station啊，所有一直都是展示4个

            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题
            宣传栏