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