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