快捷導(dǎo)航

Element--el-tabs固定在頂部問題

更新時間：2023年07月18日 10:13:43 作者：迷陣

這篇文章主要介紹了Element--el-tabs固定在頂部問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

Element--el-tabs固定在頂部

解決方案

.el-tabs--card {
? height: calc(100vh - 110px);
? /* overflow-y: auto; */
}
.el-tab-pane {
? height: calc(100vh - 110px);
? overflow-y: auto;
}

ElementUI使用el-table標(biāo)簽操作固定位置

示例代碼：

<el-table-column label="操作">
? ? <template slot-scope="scope">
? ? ? ? <el-row :gutter="12" class="nav">
? ? ? ? ? ? <el-col :span="8">
? ? ? ? ? ? ? ?<el-button size="medium" type="text" ?@click="edit(scope.$index, scope.row)">查看</el-button>
? ? ? ? ? ? </el-col>
? ? ? ? ? ? <el-col :span="6">
? ? ? ? ? ? ? ?<el-button size="medium" type="text" ?@click="Delete(scope.$index, scope.row)">刪除</el-button>
? ? ? ? ? ? </el-col>
? ? ? ? ?</el-row>
? ? </template>
</el-table-column>

增加<el-row>標(biāo)簽固定gutter值，這樣可以防止頁面變形！

el-tabs跳轉(zhuǎn)頁面到指定的tab上

功能：實現(xiàn)點擊頁面A的“更多”，跳轉(zhuǎn)到頁面B的“重大消息”

在這里插入圖片描述

先看一下el-tabs的代碼

<div class="tabs">
          <el-tabs v-model="activeName" @tab-click="changeTab">
            <el-tab-pane label="系統(tǒng)推送" name="receivedAutoNotice"></el-tab-pane>
            <el-tab-pane label="管理員通知" name="receivedNotice"></el-tab-pane>
            <el-tab-pane label="重大通知" name="receivedAnnounce"></el-tab-pane>
          </el-tabs>
</div>

data(){
	return{
	  currentTab:'receivedAutoNotice',//默認(rèn)選擇系統(tǒng)推送
      activeName:'receivedAutoNotice',
	}
}

首先，在頁面A跳轉(zhuǎn)路由時將activeName和currentTab帶上。

this.$router.push({path:'/notify?activeName=receivedAnnounce&currentTab=receivedAnnounce'});

然后注意在頁面B接收：

mounted(){
  this.showface();
},
method:{
showface(){
          if(this.$route.query.activeName!=null){
              this.activeName = this.$route.query.activeName;
              this.currentTab = this.$route.query.currentTab;
              var current1 = this.currentTab;
              this.loading = true;
              if(current1=='receivedAnnounce'){
                this.gerAnnounceList()  //這里寫一些跳轉(zhuǎn)后必須要執(zhí)行的函數(shù)
              }
            }
       },
}

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue之transition動畫組件使用解讀
Vue.js中transition組件的基本用法和語法,包括常見的6個class切換,以及與動畫插件（如animate.css、Velocity.js）的組合使用方法,文章還提到在處理多個元素、組件的過渡和列表的進(jìn)入/離開過渡時需要注意的細(xì)節(jié)
2026-01-01
vue進(jìn)行post和get請求實例講解
這篇文章主要介紹了vue進(jìn)行post和get請求實例講解，違章圍繞post和get請求的相關(guān)資料展開詳細(xì)內(nèi)容，具有一的的參考價值，需要的小伙伴可以參考一下
2022-03-03
Vue項目從webpack3.x升級webpack4不完全指南
前段時間，泡面將自己的一個Vue-cli構(gòu)建的前端框架從webpack3.x升級到了4.x版本，現(xiàn)在才拉出來記錄一下，已備忘之用，也和大家分享一下,需要的朋友可以參考下
2019-04-04
vue響應(yīng)式更新機(jī)制及不使用框架實現(xiàn)簡單的數(shù)據(jù)雙向綁定問題
vue是一款具有響應(yīng)式更新機(jī)制的框架，既可以實現(xiàn)單向數(shù)據(jù)流也可以實現(xiàn)數(shù)據(jù)的雙向綁定。這篇文章主要介紹了vue響應(yīng)式更新機(jī)制及不使用框架實現(xiàn)簡單的數(shù)據(jù)雙向綁定問題,需要的朋友可以參考下
2019-06-06
前端axios取消請求總結(jié)詳解
這篇文章主要為大家介紹了前端axios取消請求總結(jié)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-10-10
vue3 高德地圖關(guān)鍵詞搜索獲取經(jīng)緯度的示例代碼
這篇文章主要介紹了vue3 高德地圖關(guān)鍵詞搜索獲取經(jīng)緯度的示例代碼,需要的朋友可以參考下
2024-08-08
Vue中組件之間數(shù)據(jù)的傳遞的示例代碼
本篇文章主要介紹了Vue中組件數(shù)據(jù)的傳遞的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09
Vue集成阿里云做滑塊驗證的實踐
滑塊驗證是比較常見的人機(jī)鑒別的方法，本文主要介紹了Vue集成阿里云做滑塊驗證，具有一定的參考價值，感興趣的可以了解一下
2022-01-01
vue+xlsx實現(xiàn)表格導(dǎo)出進(jìn)度提示功能
這篇文章主要為大家詳細(xì)介紹了vue如何結(jié)合ant-design和xlsx 實現(xiàn)表格導(dǎo)出進(jìn)度提示功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解下
2025-05-05
Vue頁面骨架屏的實現(xiàn)方法
在開發(fā)webapp的時候總是會受到首屏加載時間過長的影響，越來越多的APP采用了“骨架屏”的方式去提升用戶體驗。這篇文章主要介紹了Vue頁面骨架屏的實現(xiàn)方法,感興趣的小伙伴們可以參考一下
2018-05-05