首页 > 其他分享 >如何将element-ui中的tab组件默认展示的tab标签数量改掉?

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

时间:2023-11-11 19:33:42浏览次数:36  
标签:tab 展示 标签 默认 element ui Tab tabList

要将 Element UI 中的 Tab 组件默认展示的标签数量更改,可以使用 tab-list 属性设置。tab-list 属性用于控制默认展示的标签数量。

以下是修改 Tab 组件默认展示标签数量的示例代码:

<template>
  <el-tabs v-model="activeTab" :tab-list="tabList">
    <el-tab-pane v-for="tab in tabList" :label="tab.label" :name="tab.name" :key="tab.name">
      <!-- Tab 内容 -->
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeTab: '', // 设置默认活动的标签
      tabList: [
        { label: 'Tab 1', name: 'tab1' },
        { label: 'Tab 2', name: 'tab2' },
        { label: 'Tab 3', name: 'tab3' },
        // 添加更多的Tab
      ],
    };
  },
};
</script>

在上面的代码中,我们使用 tab-list 属性将 tabList 数组传递给 Tab 组件。通过设置 tabList 数组的长度,你可以控制默认展示的标签数量。例如,如果你只想默认展示前两个标签,你可以将 tabList 数组的长度设置为 2。

注意:当标签数量超出默认展示数量时,Element UI Tab 组件会以更多标签的形式进行展示,提供一个下拉菜单供用户选择剩余的标签。

标签:tab,展示,标签,默认,element,ui,Tab,tabList
From: https://blog.51cto.com/M82A1/8319202

相关文章

  • IPTABLES的参数解释
    iptables手册页总览用iptables-ADC来指定链的规则,-A添加-D删除-C修改iptables-[RI]chainrulenumrule-specification[option]用iptables-RI通过规则的顺序指定iptables-Dchainrulenum[option]删除指定规则iptables-[LFZ][chain][option]用iptables-LFZ链名[......
  • FastReport打印DataBand分列:DataBand.Columns.Count
    FastReport打印DataBand分列,DataBand.Columns.Count。看图,转载请注明海宏软件:下面的图片:diffImg、pltImg、rbcImg实际上是三行记录,横着打印了。 C#下载网页文件并存入DataTable的DataRow的DataColumn字段里:if(web==null)web=newWebClient();row["oImg"]=web.Down......
  • vue2 vue.min.js和vue-cli-service build --target lib 构建的.min.js的压缩原理,使用
    1vue-cli-service --targetlibhttps://github.com/vuejs/vue-cli/blob/f0f254e4bc81ed322eeb9f7de346e987e845068e/packages/%40vue/cli-service/lib/commands/build/index.js#L5可以看到这里formats:'commonjs,umd,umd-min',默认有三种格式,其中的umd-min经过了压缩再去搜u......
  • Arduino UNO使用DHT11温湿度传感器通过串口向PC发送温湿度信息​
    ArduinoUNO使用DHT11温湿度传感器通过串口向PC发送温湿度信息硬件介绍笔者使用的开发板为ArduinoUNO国产兼容板,淘宝上大约卖20rmb左右。如下图DHT11传感器为四脚封装样式,从正面看引脚从左往右依次为1、2、3、4引脚,其中1引脚为VCC3~5V,2引脚为通信引脚要与单片机引脚相连,3引脚是个......
  • 1. WPF DataBinding--概述
    数据绑定为应用程序提供了一种简单而一致的方式来表示数据并与之交互,UI元素可以绑定到不同的数据源(.net对象和XML),什么是数据绑定数据绑定是一个UI和它显示数据建立联系的过程。如果建立了正确的绑定,当数据发生变化并发出适当的通知时,UI元素也会自动跟着变化,当UI元素的数据表现发生......
  • js执行的比dom渲染快很多,执行完一定的js才在页面渲染一次dom,UI渲染是宏任务
    假设HTML有一个按钮id为btn,经过以下操作最终会变成什么颜色?document.getElementById('btn').style='background:blue';document.getElementById('btn').style='background:red';Promise.resolve().then(()=>{document.getElementById('......
  • Go语言开发分布式任务调度 轻松搞定高性能Crontab,技能储备+项目开发
    写在前面最近离职交接空档期,在慕课网上学习了下go语言实现分布式crontab任务调度系统。自己也跟随视频实现了一把(跟原版略有不同)。现把成果记录一下。最终代码:https://github.com/funkol2007/distributed_crontab系统介绍实现目标:实现一个分布式crontab系统。用户可以通过......
  • CompletableFuture 学习
    创建异步任务CompletableFuture创建异步任务,一般有supplyAsync和runAsync两个方法supplyAsync执行CompletableFuture任务,没有返回值//使用默认内置线程池ForkJoinPool.commonPool(),根据supplier构建执行任务publicstatic<U>CompletableFuture<U>supplyAsync(Suppli......
  • Go中字符串处理:fmt.Sprintf与string.Builder的比较
    在Go语言中,我们通常会遇到两种主要的方式来处理和操作字符串:使用fmt.Sprintf函数和string.Builder类型。尽管两者都可以实现字符串的格式化和连接,但它们在性能和用法上有一些关键区别。1.fmt.Sprintffmt.Sprintf是一个函数,它根据提供的格式化字符串和参数列表,将它们格式化为一......
  • C++ insert into tables of pgsql via libpq-fe.h and compile by g++-13
    1.Installlibpq-devsudoaptinstalllibpq-devlocatelibpq-fe.h/usr/include/postgresql/libpq-fe.h 2.createtablet1createtablet1(idbigserialnotnullprimarykey,authorvarchar(40)notnull,commentvarchar(40)notnull,contentvarchar(40)notn......