动态修改el-tab-pane 的label(整理)

简介: 动态修改el-tab-pane 的label(整理)

更详细内容看官方文档:Tabs 标签页

<template>
 <el-tabs v-model="name" @tab-click="clickTab">
    <el-tab-pane :label="'用户管理('+num+')'" 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>
</template>
<script>
export default {
  data() {
    return {
      num:'10',
      name: "second",
    };
  },
  methods: {
    clickTab(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>
相关文章
element el-cascader动态编辑赋值后,不回显的解决方法(整理)
element el-cascader动态编辑赋值后,不回显的解决方法(整理)
el-input el-select调整字体及内边距
1. 背景 el-input输入框默认提供的字体较小,且内边距较大。 这是为了提供统一的样式和好看的外观。 在某些情况下,我们希望使用较大的字体,且让输入框的内边距小一些以便容纳更多东西。
2592 0
|
6月前
|
JavaScript
如何解决ElementUI中的el-tab-pane组件使用v-show不生效的问题?
如何解决ElementUI中的el-tab-pane组件使用v-show不生效的问题?
406 3
|
4月前
|
前端开发
el-form-item label中的字体样式设置格式
这篇文章介绍了如何在Element UI的`el-form-item`组件中自定义`label`标签的样式,通过使用`slot`属性和内联CSS来改变字体颜色和加粗显示。
el-form-item label中的字体样式设置格式
|
5月前
el-input实现后缀图标和clearable的兼容,调整el-input clearable与自定义图标展示位置问题
el-input实现后缀图标和clearable的兼容,调整el-input clearable与自定义图标展示位置问题
260 1
|
5月前
|
JavaScript
使用el-tab,el-tab-pane循环使用循环后不显示下划线问题
使用el-tab,el-tab-pane循环使用循环后不显示下划线问题
202 0
|
JavaScript
el-select下拉多选框 el-select 设置默认值不可删除功能
Element-UI是一款广泛使用的Vue.js组件库,其中El-Select下拉多选框组件在实际项目开发中经常被使用。然而,在Element 3.0版本中,El-Select下拉多选框默认值可被删除,这可能会导致一些意外情况。本文将介绍如何解决这个问题,实现El-Select下拉多选框设置默认值不可删除的功能。
720 0
el-select下拉多选框 el-select 设置默认值不可删除功能
【element-ui用法】el-radio-group默认选择和数据回显问题的解决方案
【element-ui用法】el-radio-group默认选择和数据回显问题的解决方案
804 0