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

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

时间:2024-09-19 16:38:37浏览次数:10  
标签: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

相关文章

  • spring @cacheable 注解使用spel表达式
    这里主要讲一下复杂的spel表达式,简单的不写了解析集合集合需要先自定义一个方法,比如getAuthorsName,然后在注解里通过root.target.getAuthorsName把方法引用进去publicclassBookService{publicStringgetAuthorsName(List<Author>authors){returnauthors.s......
  • 在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微内核和单体内核微内核:只有最基本的功能直接在中央内核(微内核)中实现。所有其他功能都委托给各自独立的进程,这些进程通过通信接口与......
  • 易优eyoucms网站详情页报错报错 \core\library\think\Loader.php 类不存在:app\co
    类不存在:app\common\model\Pic,这个错误表明PHP无法找到类 app\common\model\Pic。这通常是因为类文件未被正确加载或命名空间配置不正确导致的。以下是一些可能的解决步骤:1.确认类文件路径确保类文件 Pic 的路径正确并且文件存在。检查文件路径确认 app\common\model......
  • 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......
  • 云计算-k8s上使用定时任务配置elatiscdump和mysqldump
    现在很多中间件都是容器化部署到k8s平台上,例如elasticsearch和mysql。一般的商业产品k8s都有针对这些中间的备份功能,但是如果我们要对这些容器的化的中间件导出数据进行备份,可以采用k8s的定时任务来执行elasticdump定时任务elasitcdump是一款开源的ES数据迁移工具,国内码云地址 h......
  • 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......