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屬性的值相互綁定，綁定上的值為頁(yè)面默認(rèn)展示的項(xiàng) ? // label 為展示在頁(yè)面的標(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)屬性后，把想要展示的其他頁(yè)面標(biāo)簽寫入
<el-tab-pane>標(biāo)簽中，通過(guò)對(duì)應(yīng)的點(diǎn)擊事件來(lái)控制切換展示不同頁(yè)面
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue祖孫組件如何實(shí)現(xiàn)傳值問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
vue中的el-form表單rule校驗(yàn)問題(特殊字符、中文、數(shù)字等)
這篇文章主要介紹了vue中的el-form表單rule校驗(yàn)問題(特殊字符、中文、數(shù)字等)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了vue3和vue2中mixins的使用解析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了vue?如何根據(jù)條件判斷屬性的添加和去除，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-01-01
vue實(shí)現(xiàn)輸入框的模糊查詢的示例代碼（節(jié)流函數(shù)的應(yīng)用場(chǎng)景）
這篇文章主要介紹了vue實(shí)現(xiàn)輸入框的模糊查詢的示例代碼（節(jié)流函數(shù)的應(yīng)用場(chǎng)景），文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
使用vue完成微信公眾號(hào)網(wǎng)頁(yè)小記(推薦)
公司最近有一個(gè)H5頁(yè)面的功能，比較簡(jiǎn)單的一個(gè)調(diào)查表功能，嵌套在我們微信公眾號(hào)里面。這篇文章主要介紹了使用vue完成微信公眾號(hào)網(wǎng)頁(yè)小記,需要的朋友可以參考下2019-04-04
Vue 應(yīng)用在首屏加載時(shí)速度過(guò)慢,通常與以下問題有關(guān)：打包文件過(guò)大、網(wǎng)絡(luò)請(qǐng)求過(guò)多、資源加載過(guò)慢,針對(duì)這些問題,本文給大家介紹了Vue首屏加載過(guò)慢的優(yōu)化方法,需要的朋友可以參考下2025-01-01
vue-router中 query傳參和params傳參的使用和區(qū)別講解
這篇文章主要介紹了vue-router中 query傳參和params傳參的使用和區(qū)別講解,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01
vue利用vue meta info設(shè)置每個(gè)頁(yè)面的title與meta信息
這篇文章主要給大家介紹了關(guān)于vue如何利用vue meta info設(shè)置每個(gè)頁(yè)面的title與meta信息的相關(guān)資料,文中將實(shí)現(xiàn)的方法介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-10-10
詳細(xì)聊聊vue組件是如何實(shí)現(xiàn)組件通訊的
組件間通信簡(jiǎn)單來(lái)說(shuō)就是組件間進(jìn)行數(shù)據(jù)傳遞,就像我們?nèi)粘５拇螂娫?就是通訊的一種方式,下面這篇文章主要給大家介紹了關(guān)于vue組件是如何實(shí)現(xiàn)組件通訊的相關(guān)資料,需要的朋友可以參考下2022-05-05