iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue如何给element-ui中的el-tabs动态设置label属性
  • 478
分享到

vue如何给element-ui中的el-tabs动态设置label属性

vue element-uielement-ui中el-tabs动态设置label属性 2022-11-13 14:11:11 478人浏览 安东尼
摘要

目录给element-ui中的el-tabs动态设置label属性关于element-ui-tabs标签的基本使用给element-ui中的el-tabs动态设置label属性 效果

给element-ui中的el-tabs动态设置label属性

效果:

代码:

<template>
  <div class="login">
    <el-tabs v-model="activeName">
      <el-tab-pane :label="'用户管理('+name+')'" name="1">用户管理</el-tab-pane>
      <el-tab-pane label="配置管理" name="2">配置管理</el-tab-pane>
      <el-tab-pane label="角色管理" name="3">角色管理</el-tab-pane>
      <el-tab-pane label="定时任务补偿" name="4">定时任务补偿</el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  data() {
    return {
      name:'10',
      activeName: "1",
    };
  },
  methods: {
    
  },
};
</script>

关于element-ui-tabs标签的基本使用

 <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
 </el-tabs>
 
// v-model="activeName" activeName 与<el-tab-pane>标签中的name属性的值相互绑定,绑定上的值为页面默认展示的项
 
// label 为展示在页面的标签名
 
// @tab-click="handleClick" tab 被选中时触发,activeName 的值也会随之更改,返回值为 name
 
// 点击对应标签内容的显示写在<el-tab-pane>标签中

此标签作用类似于导航栏,设置完导航栏标题和对应属性后,把想要展示的其他页面标签写入

<el-tab-pane>标签中,通过对应的点击事件来控制切换展示不同页面 

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。 

--结束END--

本文标题: vue如何给element-ui中的el-tabs动态设置label属性

本文链接: https://www.lsjlt.com/news/172337.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue如何给element-ui中的el-tabs动态设置label属性
    目录给element-ui中的el-tabs动态设置label属性关于element-ui-tabs标签的基本使用给element-ui中的el-tabs动态设置label属性 效果...
    99+
    2022-11-13
    vue element-ui element-ui中el-tabs 动态设置label属性
  • element-ui中如何给el-table的某一行或某一列加样式
    目录1.查阅element-ui官方文档后我们发现有如下属性 :cell-class-name: 2.为表格el-table添加该属性,并指定函数名: :cell-class-na...
    99+
    2023-01-03
    el-table某一行加样式 el-table 某一列加样式
  • vue实现动态给data函数中的属性赋值
    目录vue动态给data函数中的属性赋值vue给data中的数据赋值报错问题背景分析解决方案vue动态给data函数中的属性赋值 1.首先创建一个监视器,用来监视相关的属性 2.当这...
    99+
    2024-04-02
  • elementui中表单el-form的label如何设置宽度
    目录element ui中表单el-form的label设置宽度在el-form-item 重置label宽度element ui中表单el-form的label设置宽度 测试要求把...
    99+
    2024-04-02
  • js如何设置对象中的动态属性名称
    这篇文章主要为大家展示了“js如何设置对象中的动态属性名称”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“js如何设置对象中的动态属性名称”这篇文章吧。对象中的动态属性名称使用动态键设置对象属性很...
    99+
    2023-06-27
  • 如何使用JavaScript动态设置CSS3属性值
    这篇文章将为大家详细讲解有关如何使用JavaScript动态设置CSS3属性值,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。使用JavaSc...
    99+
    2024-04-02
  • Vue如何设置button的disable属性
    目录Vue设置button的disable属性1.这个属性在HTML里只有1个值2.如果需要在vue项目中控制按钮的可用与否Vue使用js控制button的disabled属性Vue...
    99+
    2024-04-02
  • vue中如何动态设置css样式的hover
    目录vue动态设置css样式的hovervue使用hover.css动画vue动态设置css样式的hover 1.定义不同的颜色数组 colorList: ['#4cb352', '...
    99+
    2024-04-02
  • vue如何动态绑定img的src属性(v-bind)
    目录动态绑定img的src属性(v-bind)解决办法vue添加img的src地址 v-bind动态绑定img的src属性(v-bind) 今天遇到一个特别坑爹问题,页面中使用img...
    99+
    2024-04-02
  • 如何使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
    这篇文章给大家分享的是有关如何使用element-ui的el-menu导航选中后刷新页面保持当前选中状态的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。具体代码如下所示:<e...
    99+
    2024-04-02
  • vue中如何给data里面的变量增加属性
    目录给data里面的变量增加属性vue框架是使用mvvm模式我废话不多说直接上方法了 给data中的响应式对象动态添加属性给data里面的变量增加属性 vue框架是使用mv...
    99+
    2024-04-02
  • 如何在html中设置字体的属性
    这篇文章给大家介绍如何在html中设置字体的属性,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。html中设置字体的属性:font、font-family、font-size、font-style、font-varian...
    99+
    2023-06-15
  • javascript中如何动态合并两个对象的属性
    小编给大家分享一下javascript中如何动态合并两个对象的属性,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!我们可以使用扩展操作符(...)将不同的对象合并为...
    99+
    2023-06-15
  • vue中iview列表table render函数如何设置DOM属性值
    小编给大家分享一下vue中iview列表table render函数如何设置DOM属性值,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一...
    99+
    2024-04-02
  • Vue中input控件如何通过value绑定动态属性及修饰符
    这篇文章主要介绍了Vue中input控件如何通过value绑定动态属性及修饰符,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。对于单选按钮,勾...
    99+
    2024-04-02
  • Springboot应用中如何设置Cookie的SameSite属性
    这篇文章主要为大家展示了“Springboot应用中如何设置Cookie的SameSite属性”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Springboot应用中如何设置Cookie的Sam...
    99+
    2023-06-29
  • 如何解决vue动态为数据添加新属性遇到的问题
    这篇文章主要介绍了如何解决vue动态为数据添加新属性遇到的问题,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。vue为数据添加属性时遇到的坑,...
    99+
    2024-04-02
  • 如何理解动态的样式语言less语法中混合属性
    这篇文章主要介绍“如何理解动态的样式语言less语法中混合属性”,在日常操作中,相信很多人在如何理解动态的样式语言less语法中混合属性问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大...
    99+
    2024-04-02
  • ios开发中如何实现模态跳转的动画设置
    这篇文章主要介绍ios开发中如何实现模态跳转的动画设置,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!模态跳转的动画设置设置模态跳转的动画,系统提供了四种可供选择DetailViewC...
    99+
    2024-04-02
  • vue如何设置动态的栅格占位、水平偏移量、类名、样式
    目录设置动态的栅格占位、水平偏移量、类名、样式vue中设置动态如下 vue动态控制样式动态添加class名动态更改style样式设置动态的栅格占位、水平偏移量、类名、样式 ...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作