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