Element--el-tabs固定在頂部問(wèn)題
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值,這樣可以防止頁(yè)面變形!
el-tabs跳轉(zhuǎn)頁(yè)面到指定的tab上
功能:實(shí)現(xiàn)點(diǎn)擊頁(yè)面A的“更多”,跳轉(zhuǎn)到頁(yè)面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',
}
}首先,在頁(yè)面A跳轉(zhuǎn)路由時(shí)將activeName和currentTab帶上。
this.$router.push({path:'/notify?activeName=receivedAnnounce¤tTab=receivedAnnounce'});然后注意在頁(yè)面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é)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- vue3+element?Plus使用el-tabs標(biāo)簽頁(yè)解決頁(yè)面刷新不回到默認(rèn)頁(yè)的問(wèn)題
- vue2項(xiàng)目使用element-ui的el-tabs組件導(dǎo)致瀏覽器崩潰卡死問(wèn)題
- elementUI給el-tabs/el-tab-pane添加圖標(biāo)效果實(shí)例
- vue?elementUi中的tabs標(biāo)簽頁(yè)使用教程
- elementui中使用el-tabs切換實(shí)時(shí)更新數(shù)據(jù)
- ElementUI中el-tabs事件綁定的具體使用
- vue+element tabs選項(xiàng)卡分頁(yè)效果
- Element中el-tabs左右滑動(dòng)動(dòng)畫的實(shí)現(xiàn)
相關(guān)文章
vue進(jìn)行post和get請(qǐng)求實(shí)例講解
這篇文章主要介紹了vue進(jìn)行post和get請(qǐng)求實(shí)例講解,違章圍繞post和get請(qǐng)求的相關(guān)資料展開詳細(xì)內(nèi)容,具有一的的參考價(jià)值,需要的小伙伴可以參考一下2022-03-03
Vue項(xiàng)目從webpack3.x升級(jí)webpack4不完全指南
前段時(shí)間,泡面將自己的一個(gè)Vue-cli構(gòu)建的前端框架從webpack3.x升級(jí)到了4.x版本,現(xiàn)在才拉出來(lái)記錄一下,已備忘之用,也和大家分享一下,需要的朋友可以參考下2019-04-04
vue響應(yīng)式更新機(jī)制及不使用框架實(shí)現(xiàn)簡(jiǎn)單的數(shù)據(jù)雙向綁定問(wèn)題
vue是一款具有響應(yīng)式更新機(jī)制的框架,既可以實(shí)現(xiàn)單向數(shù)據(jù)流也可以實(shí)現(xiàn)數(shù)據(jù)的雙向綁定。這篇文章主要介紹了vue響應(yīng)式更新機(jī)制及不使用框架實(shí)現(xiàn)簡(jiǎn)單的數(shù)據(jù)雙向綁定問(wèn)題,需要的朋友可以參考下2019-06-06
vue3 高德地圖關(guān)鍵詞搜索獲取經(jīng)緯度的示例代碼
這篇文章主要介紹了vue3 高德地圖關(guān)鍵詞搜索獲取經(jīng)緯度的示例代碼,需要的朋友可以參考下2024-08-08
vue+xlsx實(shí)現(xiàn)表格導(dǎo)出進(jìn)度提示功能
這篇文章主要為大家詳細(xì)介紹了vue如何結(jié)合ant-design和xlsx 實(shí)現(xiàn)表格導(dǎo)出進(jìn)度提示功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解下2025-05-05

