程式設計鹿 害 學element ui 看這篇就夠了

2022-03-17 12:47:30 字數 4660 閱讀 3113

推薦使用 npm 的方式安裝,它能更好地和 webpack 打包工具配合使用。

npm i element-ui -s
目前可以通過 unpkg.com/element-ui 獲取到最新版本的資源,在頁面上引入 js 和 css 檔案即可開始使用。

我們建議使用 cdn 引入 element 的使用者在鏈結位址上鎖定版本,以免將來 element 公升級時受到非相容性更新的影響。

通過 cdn 的方式我們可以很容易地使用 element 寫出乙個 hello world 頁面。

try element

通過基礎的 24 分欄,迅速簡便地建立布局。

使用單一分欄建立基礎的柵格布局。

通過 row 和 col 元件,並通過 col 元件的span屬性我們就可以自由地組合布局。

分欄之間存在間隔。

row 元件 提供gutter屬性來指定每一欄之間的間隔,預設間隔為 0。

通過基礎的 1/24 分欄任意擴充套件組合形成較為複雜的混合布局。

支援偏移指定的欄數。

通過制定 col 元件的offset屬性可以指定分欄偏移的欄數。

通過flex布局來對分欄進行靈活的對齊。

type屬性賦值為 'flex',可以啟用 flex 布局,並可通過justify屬性來指定 start, center, end, space-between, space-around 其中的值來定義子元素的排版方式。

用於布局的容器元件,方便快速搭建頁面的基本結構:

el-container:外層容器。當子元素中包含 el-header 或者 el-footer 時,全部子元素會垂直上下排列,否則會水平左右排列。

el-header:頂欄容器。

el-aside:側邊欄容器。

el-main:主要區域容器。

el-footer:底欄容器。

以上元件採用了 flex 布局,使用前請確定目標瀏覽器是否相容。此外,el-container的子元素只能是後四者,後四者的父元素也只能是 el-container。

案例:

導航一

分組一選項1

選項2選項3

選項4選項4-1

導航二分組一選項1

選項2選項3

選項4選項4-1

導航三分組一選項1

選項2選項3

選項4選項4-1

檢視新增

刪除王小虎

使用typeplainroundcircle屬性來定義 button 的樣式。

預設按鈕

主要按鈕

成功按鈕

資訊按鈕

警告按鈕

危險按鈕

樸素按鈕

主要按鈕

成功按鈕

資訊按鈕

警告按鈕

危險按鈕

圓角按鈕

主要按鈕

成功按鈕

資訊按鈕

警告按鈕

危險按鈕

由輸入框、選擇器、單選框、多選框等控制項組成,用以收集、校驗、提交資料

單選框核取方塊

輸入框下拉列表框

日期選擇器

檔案上傳元件

包括各種表單項,比如輸入框、選擇器、開關、單選框、多選框等。

當垂直方向空間受限且表單較簡單時,可以在一行內放置表單。

在防止使用者犯錯的前提下,盡可能讓使用者更早地發現並糾正錯誤。

這個例子中展示了如何使用自定義驗證規則來完成密碼的二次驗證。

警告框用於頁面中展示重要的提示資訊。

載入框在**等容器中載入資料時顯示.

訊息提示框

從頂部出現,3 秒後自動消失。

開啟訊息提示

vnode

彈框模擬系統的訊息提示框而實現的一套模態對話方塊元件,用於訊息提示、確認訊息和提交內容。

通知懸浮出現在頁面角落,顯示全域性的通知提醒訊息。

用於展示多條結構類似的資料,可對資料進行排序、篩選、對比或其他自定義操作。

基礎的**展示用法。

日期姓名

位址2016-05-02

王小虎上海市普陀區金沙江路 1518 弄

2016-05-04

王小虎上海市普陀區金沙江路 1517 弄

2016-05-01

王小虎上海市普陀區金沙江路 1519 弄

2016-05-03

王小虎上海市普陀區金沙江路 1516 弄

el-table元素中注入data物件陣列後,在el-table-column中用prop屬性來對應物件中的鍵名即可填入資料,用label屬性來定義**的列名。可以使用width屬性來定義列寬。

使用帶斑馬紋的**,可以更容易區分出不同行的資料。

日期姓名

位址2016-05-02

王小虎上海市普陀區金沙江路 1518 弄

2016-05-04

王小虎上海市普陀區金沙江路 1517 弄

2016-05-01

王小虎上海市普陀區金沙江路 1519 弄

2016-05-03

王小虎上海市普陀區金沙江路 1516 弄

stripe屬性可以建立帶斑馬紋的**。它接受乙個boolean,預設為false,設定為true即為啟用。

日期

姓名位址

2016-05-02

王小虎上海市普陀區金沙江路 1518 弄

2016-05-04

王小虎上海市普陀區金沙江路 1517 弄

2016-05-01

王小虎上海市普陀區金沙江路 1519 弄

2016-05-03

王小虎上海市普陀區金沙江路 1516 弄

預設情況下,table 元件是不具有豎直方向的邊框的,如果需要,可以使用border屬性,它接受乙個boolean,設定為true即可啟用。

可將**內容 highlight 顯示,方便區分「成功、資訊、警告、危險」等內容。

用清晰的層級結構展示資訊,可展開或摺疊。

為**提供導航功能的選單。

垂直選單,可內嵌子選單。

通過el-menu-item-group元件可以實現選單進行分組,分組名可以通過title屬性直接設定,也可以通過具名 slot 來設定。

預設顏色

導航一 分組一

選項1 選項2

選項3選項4

選項1

導航二

導航三

導航四

自定義顏色

導航一 分組一

選項1 選項2

選項3選項4

選項1

導航二

導航三

導航四

用於標記和選擇。

}

處理中心

我的工作台

選項1 選項2

選項3首頁

學工部在校學生管理

學生公升級/留級

學生就業情況

諮詢部意向學生管理

未報名學生管理

已報名學生管理

教研部已有課程管理

正在研發課程管理

新技術課程管理

學生列表新增學生

編輯刪除

如果你覺得這篇內容對你挺有有幫助的話:

點讚支援下吧,讓更多的人也能看到這篇內容(收藏不點贊,都是耍流氓 -_-)

Python Web不知道怎麼學?看這篇就夠了

python有很多作用,接觸過python的朋友肯定知道其幾乎無所不能,前端 後端 資料 ml ai 自動化 爬蟲 資料分析,人工智慧等等。第一階段 python入門 框架再怎麼變,基本語法不會變,基礎中的基礎 資料型別 迴圈判斷 常用模組 函式 迭代器 裝飾器 遞迴 迭代 反射 物件導向程式設計 ...

6 精通MATLAB運算方法看這篇文章就夠了

學習目標 學習經常使用的運算方法 大於,小於,等於,不等於 clear all a 7 5 b1 rand 2,2 b2 b1 0.6 b3 b1 0.7 c1 eq b2,b3 c2 b2 b3 比較大小 clear all format long a 4.44 eps b 4.44 c1 a b...

C 非同步程式設計入門看這篇就夠了

隨著.net core的流行,相信你現在的 中或多或少的會用到async以及await吧!畢竟已成標配。那麼我們為什麼要用async以及await呢?其實這是微軟團隊為我們提供的乙個語法糖,讓我們不用996就可以輕鬆的編寫非同步 並無太過神奇的地方。那麼,問題來了,什麼是非同步?非同步到底又是怎樣的...