el-tab設(shè)置默認(rèn)激活的標(biāo)簽頁(yè)實(shí)現(xiàn)步驟
我們先看看官方文檔：
步驟一：在每個(gè)el-tab-pane中間加個(gè)name屬性
步驟二：在el-tabs標(biāo)簽里綁定屬性v-model="activeTab"，activeTab是隨便自己設(shè)置的名稱(chēng)。
步驟三：在data數(shù)據(jù)里面存儲(chǔ)你在el-tabs標(biāo)簽里綁定屬性v-model所對(duì)應(yīng)的參數(shù)名activeTab
此時(shí)我設(shè)置的 activeTab: 'body',那么此時(shí)就是默認(rèn)激活的標(biāo)簽頁(yè)是 el-tab-pane標(biāo)簽里面的name="body"的標(biāo)簽頁(yè)，也就是請(qǐng)求體這個(gè)標(biāo)簽頁(yè)。
下面上傳源代碼，讓大家自己嘗試一下哈。
<el-tabs v-model="activeTab" type="border-card" style="min-height: 350px">
<el-tab-pane name="headers" label="請(qǐng)求頭(Headers)">
<CodeEdit height="280px" v-model="headers"></CodeEdit>
</el-tab-pane>
<el-tab-pane name="body" label="查詢(xún)參數(shù)(Params)">
<CodeEdit height="280px" v-model="params"></CodeEdit>
</el-tab-pane>
</el-tabs>總結(jié)
到此這篇關(guān)于el-tab設(shè)置默認(rèn)激活的標(biāo)簽頁(yè)的文章就介紹到這了,更多相關(guān)el-tab設(shè)置默認(rèn)激活標(biāo)簽頁(yè)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue3基于rem比例縮放方案,本縮放方案置于hooks中即可，文中通過(guò)示例代碼介紹了vue-cli3 中使用rem布局的方法，需要的朋友可以參考下2023-05-05
vue學(xué)習(xí)筆記之vue1.0和vue2.0的區(qū)別介紹
今天我們來(lái)說(shuō)一說(shuō)vue1.0和vue2.0的主要變化有哪些？對(duì)vue相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2017-05-05
這篇文章主要介紹了vue中返回結(jié)果是promise的處理方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue router仿天貓底部導(dǎo)航欄功能,需要的朋友可以參考下2017-10-10
解決vue-cli項(xiàng)目webpack打包后iconfont文件路徑的問(wèn)題
今天小編就為大家分享一篇解決vue-cli項(xiàng)目webpack打包后iconfont文件路徑的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue實(shí)現(xiàn)動(dòng)態(tài)給data函數(shù)中的屬性賦值
這篇文章主要介紹了vue實(shí)現(xiàn)動(dòng)態(tài)給data函數(shù)中的屬性賦值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue 國(guó)際化 vue-i18n 雙語(yǔ)言 語(yǔ)言包
這篇文章主要介紹了vue 國(guó)際化 vue-i18n 雙語(yǔ)言 語(yǔ)言包的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-06-06
這篇文章主要介紹了vue使用leafLet方式(繪圖工具),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了vue如何實(shí)現(xiàn)在線編輯excel問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Element?table?上下移需求的實(shí)現(xiàn)
本文主要介紹了Element?table?上下移需求的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07