vue elementUI實現側邊選單欄的功能

2022-07-29 19:45:13 字數 1778 閱讀 8962

僅作記錄,上接上**

class="

main

" style="

height:100vh;

">yy"

200px

">

menu

:default-active="

$route.path

"class="

el-menu-vertical-demo

"@open="

handleopen

"@close="

handleclose

"@select="

handleselect_2

"router>

"1">

"title

">

class="

el-icon-menu

">

問卷管理

"/main/wenjuanlist

">

class="

el-icon-menu

">

問卷設計

"/main/wenjuanlist

">

class="

el-icon-menu

">

問卷分配

"2">

"title

">

class="

el-icon-menu

">

我的問卷

"/main/renlist

">

class="

el-icon-menu

">

自測問卷

"/main/renlists

">

class="

el-icon-menu

">

互評問卷

"">

class="

el-icon-menu

">

"title

">問卷設計

"2">

class="

el-icon-menu

">

"title

"> 人才庫

"3">

class="

el-icon-document

">

"title

">**招聘

"/main/home

">

class="

el-icon-setting

">

"title

">手機版主頁

"5">

class="

el-icon-setting

">

"title

">企業賬戶

1、如何使布局填充滿頁面

在模版第一層的div中使用樣式,使height:100vh就可以了,放到裡層的元素中也可以,但是頁面會有滾動條出現。

2、點選選單後新頁面的顯示位置

點選選單後新頁面的顯示位置由router-view決定,當然你需要先在index.js中設定好子路由後才能顯示在router-view中,不然還是顯示在新視窗中

3、最重要的部分

這兩個是一定需要有的,至於el-menu中的樣式,網上沒找到它的樣式是啥,估計有個預設的吧,設定好寬度就可以了。

:default-active="

$route.path

"router

4、子路由的配置

子路由怎麼設定,網上有很多,同乙個元件,可以同時用於子路由和主路由中,並不影響。

vue Element ui 實現分頁

實現分頁功能的關鍵技術點為頁面顯示的結果處理,而此處的關鍵技術點為js的slice 方法。首先介紹slice 方法 slice 方法可從已有的陣列中返回選定的元素。slice 方法可提取字串的某個部分,並以新的字串返回被提取的部分。主要用法 array.slice start,end 引數描述 st...

vue element ui 實現分頁效果

我使用得是el table el pagination來實現的,話不多說,直接上 編輯刪除 export default inject reload 注入reload方法 data created mounted methods handlecurrentchange function curren...

vue Element ui實現分頁效果

當我們向後台請求大量資料的時候,並要在頁面展示出來,請求的資料可能上百條資料或者更多的時候,並不想在乙個頁面展示,這就需要使用分頁功能來去完成了。1.本次所使用的是vue2.0 element ui實現乙個分頁功能,element ui這個元件特別豐富,分頁中給我提供了乙個pagination 分頁...