首页 > 其他分享 >el-tabs 搭配 el-badge微章使用

el-tabs 搭配 el-badge微章使用

时间:2024-09-19 16:38:37浏览次数:14  
标签:el tabs 微章 badge 实现 搭配

实现效果

 实现: 

<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="审批中" name="inProcess">
          <InProcess />
        </el-tab-pane>
        <el-tab-pane label="审批被驳回" name="turnDown">
          <template #label>
            <el-badge :value="200" :max="99">
              <span>审批被驳回</span>
            </el-badge>
          </template>
          <TurnDown />
        </el-tab-pane>
        <el-tab-pane label="审批通过" name="pass">
          <Pass />
        </el-tab-pane>
        <el-tab-pane label="我撤销的" name="cancel">
          <Cancel />
        </el-tab-pane>
      </el-tabs>

 

标签:el,tabs,微章,badge,实现,搭配
From: https://www.cnblogs.com/tlfe/p/18420875

相关文章

  • 在Windows10中使用rust的diesel库
    介绍最近在学习ActixWeb时,需要用到数据库操作,简单尝试了一下diesel,也遇到了一些问题。在这里记录一下,供大家参考。1.安装根据Diesel官网介绍,使用cargobinstall安装dieselcli。cargobinstalldiesel_cli如果报错error:nosuchcommand:`binstall`需要先安装cargo-bi......
  • 什么是DOM(Document Object Model),它有什么作用
    关注我,持续分享逻辑思维&管理思维&面试题;可提供大厂面试辅导、及定制化求职/在职/管理/架构辅导;推荐专栏《10天学会使用asp.net编程AI大模型》,目前已完成所有内容。一顿烧烤不到的费用,让人能紧跟时代的浪潮。从普通网站,到公众号、小程序,再到AI大模型网站。干货满满。学成后可......
  • Professional Linux Kernel Architecture(一)
    基于linux内核2.6.24版本,书籍:ProfessionalLinuxKernelArchitecture英文版(可在https://github.com/welldef/os_books.git下载)1一些概念1.1微内核和单体内核微内核:只有最基本的功能直接在中央内核(微内核)中实现。所有其他功能都委托给各自独立的进程,这些进程通过通信接口与......
  • element-plus 如何修改el-table 滚动条高度,el-table滚动条放置在表格外面
    先上效果图: 实现方式,自定义全局的element样式如下:/***表格滚动条*///横向滚动条高度$scrollbarheight:15px;.el-scrollbar{//偏移.el-scrollbar__bar{bottom:1px;}//高度.el-scrollbar__bar.is-horizontal{height:$scrollbarheight;......
  • 使用 PowerShell 管理 DNS 服务器,你可以执行多种操作,如添加、删除和修改 DNS 记录,以及
    使用PowerShell管理DNS服务器,你可以执行多种操作,如添加、删除和修改DNS记录,以及管理DNS区域。以下是一些常用的cmdlet示例:查看所有DNS区域powershellCopyCodeGet-DnsServerZone添加新的DNS区域powershellCopyCodeAdd-DnsServerPrimaryZone-Name"yourdomai......
  • vue3/配置Element-Plus主题颜色
    1.了解主题颜色在Element-Plus中,主题颜色通常包含以下属性:主色(PrimaryColor):主色是应用中使用最频繁的颜色,通常用于按钮、链接、图标等,以提供视觉焦点和品牌识别度。辅助色(AuxiliaryColors):辅助色用于支持和补充主色,可以用于不同的组件状态,如成功、警告、错误等。中性......
  • vue3/Element-Plus/路由的使用
    我们来实现一个简单的二级路由1.准备主页和要配置的组件主页面<template><!--加载配置路由--><RouterView></RouterView></template><stylescoped></style>组件1<template><div>考试组件</div></template>组件2<temp......