vue如何給element-ui中的el-tabs動態(tài)設置label屬性
更新時間：2022年08月10日 14:21:11 作者：_仰望星空的你
這篇文章主要介紹了vue如何給element-ui中的el-tabs動態(tài)設置label屬性，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
給element-ui中的el-tabs動態(tài)設置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 被選中時觸發(fā)，activeName 的值也會隨之更改，返回值為 name ? // 點擊對應標簽內(nèi)容的顯示寫在<el-tab-pane>標簽中
此標簽作用類似于導航欄，設置完導航欄標題和對應屬性后，把想要展示的其他頁面標簽寫入
<el-tab-pane>標簽中，通過對應的點擊事件來控制切換展示不同頁面
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
VUE中Echarts的resize事件報錯和移除windows的事件問題
這篇文章主要介紹了VUE中Echarts的resize事件報錯和移除windows的事件問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
Wavesurfer.js是一款基于HTML5?canvas和Web?Audio的聲紋可視化插件，功能十分強大，在Vue框架中嵌入使用該插件，今天重點給大家介紹下vue使用wavesurfer.js解決音頻可視化播放問題，感興趣的朋友一起看看吧2022-04-04
在本篇文章里小編給大家整理的是一篇關于vue中進行微博分享的實例內(nèi)容，有需要的朋友們可以參考下。2019-10-10
Elemenu中el-table中使用el-popover選中關閉無效解決辦法(最新推薦)
這篇文章主要介紹了Elemenu中el-table中使用el-popover選中關閉無效解決辦法(最新推薦),因為在el-table-column里,因為是多行,使用trigger="manual"?時,用v-model="visible"來控制時,控件找不到這個值,才換成trigger="click",需要的朋友可以參考下2024-03-03
在vue中當我們管理數(shù)據(jù)的時候比較亂，我們要用到下面的這個庫，本文主要介紹了如何使用 Vuex的入門教程，具有一定的參考價值，感興趣的可以了解一下2022-02-02
vue 實現(xiàn)根據(jù)data中的屬性值來設置不同的樣式
這篇文章主要介紹了vue 實現(xiàn)根據(jù)data中的屬性值來設置不同的樣式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
本篇文章主要介紹了Vue組件嵌套二種實現(xiàn)方式(測試實例)，具有一定的參考價值，代碼很簡單，感興趣的小伙伴們可以參考一下2017-09-09
這篇文章主要介紹了vue如何點擊多個tab標簽打開關閉多個頁面，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要為大家詳細介紹了Vue實現(xiàn)文本展開收起功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
本篇文章主要介紹了VUE實現(xiàn)表單元素雙向綁定（總結） ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08