ElementUI中el-tabs事件綁定的具體使用
更新時間：2022年04月15日 10:09:29 作者：雪梅零落
本文主要介紹了ElementUI中el-tabs事件綁定的具體使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
tabs組件的屬性
tabs的屬性
tabs的事件
tab-pane的屬性
標簽代碼
<el-tabs v-model="activeName">
<el-tab-pane name="0" label="標簽1"></el-tab-pane>
<el-tab-pane name="1" label="標簽1"></el-tab-pane>
<el-tab-pane name="2" label="標簽1"></el-tab-pane>
</el-tabs>data初始化‘activeName’的值
data() {
return {
activeName: '0',
}
}用watch監(jiān)聽‘activeName’的變化，從而響應不同的事件
watch : {
'activeName':function(val) { //監(jiān)聽切換狀態(tài)-計劃單
let urlStr = '/index/test?tabid=' + val;
this.$router.push(urlStr);
// 注釋，根據val的不同，跳轉到不同
},
}
在create獲取URL參數
created() {
?? ??? ??? ?
?? ?if(this.$route.query.tabid) {
?? ??? ?this.activeName = this.$route.query.tabid;
? ? }else{
?? ? ? ?this.activeName = 0;
? ? }
},補充： 可直接運用tab-click綁定事件
<template>
? <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-tabs>
</template>
<script>
? export default {
? ? data() {
? ? ? return {
? ? ? ? activeName: 'second'
? ? ? };
? ? },
? ? methods: {
? ? ? handleClick(tab, event) {
? ? ? ? console.log(tab, event);
? ? ? ? if(tab.name == 'second'){
? ? ? ? ?? ?// 觸發(fā)‘配置管理'事件
? ? ? ? ?? ?this.second();
? ? ? ? }else{
? ? ? ? ?? ?// 觸發(fā)‘用戶管理'事件
? ? ? ? ?? ?this.first();
? ? ? ? }
? ? ? },
? ? ? /**
? ? ? ?* 觸發(fā)‘用戶管理'事件
? ? ? ?*/
? ? ? first(){
? ? ? ?? ?console.log('我是用戶管理');
? ? ? },
? ? ? /**
? ? ? ?* 觸發(fā)‘配置管理'事件
? ? ? ?*/
? ? ? second(){
? ? ? ?? ?console.log('我是配置管理');
? ? ? }
? ? }
? };
</script>
到此這篇關于ElementUI中el-tabs事件綁定的具體使用的文章就介紹到這了,更多相關ElementUI el-tabs事件綁定內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
使用vue 國際化i18n 實現(xiàn)多實現(xiàn)語言切換功能
這篇文章主要介紹了使用vue 國際化i18n 多實現(xiàn)語言切換功能，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下2018-10-10
本文主要介紹了Electron+Vue3+Vite搭建桌面應用的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-07-07
本篇文章主要介紹了Vue 2.0學習筆記之Vue中的computed屬性，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
vue項目實現(xiàn)記住密碼到cookie功能示例(附源碼)
本篇文章主要介紹了vue項目實現(xiàn)記住密碼到cookie功能示例(附源碼)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-01-01
vue?elementui?實現(xiàn)圖片上傳后拖拽排序功能示例代碼
這篇文章主要介紹了vue?elementui?實現(xiàn)圖片上傳后拖拽排序功能,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-01-01
vue+webpack實現(xiàn)異步加載三種用法示例詳解
這篇文章主要介紹了vue+webpack實現(xiàn)異步加載的三種用法，文中給大家提到了vue+webpack實現(xiàn)異步組件加載的代碼，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2018-04-04
這篇文章主要介紹了vue3中安裝使用vue-i18n實時切換語言不用刷新問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要為大家介紹了一款不用跑項目的vscode組件所見即所得效果的使用方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-04-04
這篇文章主要為大家詳細介紹了vuedraggable實現(xiàn)拖拽功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
Ant?Design?of?Vue?select框獲取key和name的問題
這篇文章主要介紹了Ant?Design?of?Vue?select框獲取key和name的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06