Element-ui簡單使用方法

2020-12-06 可愛的張家瑞

Element-ui，是一套為開發者、設計師和產品經理準備的基於Vue 2.0的由餓了麼公司出品的桌面端組件庫。

下載安裝

npm install vue #安裝Vue

npm i element-ui -S #安裝Element-ui

圖標，el內置了許多圖標，使用icon="iconname"屬性即可使用，也推薦使用

對於後臺程式設計師來說，大部分情況下都是在對表單進行操作。el幾乎內置了開發中會使用的所有表單組件。

編寫前端的基本套路：

見過足夠多的組件，拼接組件，這樣就形成了網頁的基本形狀。修改CSS即可。

相關焦點

  • 封裝element-ui表格,我是這樣做的
    使用過element-ui的表格的同學應該都有這樣的體會，做一個簡單的表格還比較容易，但如果這個表格包含了頂部的按鈕，還有分頁，甚至再包含了行編輯，那開發工作量就成倍的增加，特別是在開發管理系統的時候，表格一個接一個的去開發， 即浪費時間，還對個人沒有什麼提升。今天小編帶來了自己封裝的一個表格，讓你用JSON就可以簡單的生成表格。
  • Vue 3下element-ui用不了怎麼辦,element-plus來幫你
    element-plus你可以理解為是element-ui支持Vue 3的版本，element-plus是一套支持Vue 3.0的組件庫，提供的組件涵蓋了絕大部分頁面UI的需求。在Vue 3的腳手架項目中，首先安裝element-plus的npm包，命令如下所示：npm install element-plus -S編輯main.js，引入整個element-plus組件和所需的樣式，由於element-plus組件內部默認使用英語，而我們項目需要使用中文
  • Laravel + Element 超簡單實現分頁效果案例教程
    Laravel 中實現數據分頁非常簡單，使用 Element-UI 完成分頁數據的前端展示同樣非常簡單。一、Laravel 分頁1、在其他框架中，分頁操作可能比較複雜。Laravel 不管使用資料庫查詢構造器 或者 Eloquent ORM ，都可以非常方便、易用的完成資料庫查詢結果集分頁操作。
  • 如何創建vue項目並使用element框架中的el-select
    cnpm install --global vue-cli2、創建一個基於webpack模板項目，使用命令打開瀏覽器，在地址欄輸入預覽效果7、按Ctrl + C快捷鍵停止項目，執行命令npm i element-ui
  • Element- UI 點擊按鈕實現樹形數據table全部展開和摺疊
    本文中element-ui版本為 2.13.0Element- UI中樹形數據table有一個屬性default-expand-all是控制樹形數據的展開和摺疊的，但是我們如果使用按鈕動態更改該屬性是沒有效果的，因為其只在table第一次初始化的時候有效。
  • 餓了麼公司前端團隊開源前端基於 Vue的桌面端組件庫-Element
    效率 Efficiency簡化流程：設計簡潔直觀的操作流程；清晰明確：語言表達清晰且表意明確，讓用戶快速理解進而作出決策；幫助用戶識別：界面簡單直白，讓用戶快速識別而非回憶，減少用戶記憶負擔。可控 Controllability用戶決策：根據場景可給予用戶操作建議或安全提示，但不能代替用戶進行決策；結果可控：用戶可以自由的進行操作，包括撤銷、回退和終止當前操作等。
  • 開源組件分享-Avue基於elementUI CRUD最強封裝
    這些框架用過的應該都很熟悉了，今天我我要介紹的是另一款UI組件Avue.js，之所以介紹Avue.js因為我前段時間使用過，裡面有些功能確實很方便，比如使用Avue的表格組件，設置幾個對應的屬性後，頁面的搜索條件、導出、篩選、增刪改查功能都不需要自己去處理了。
  • Semantic UI 1.0 發布,前端 UI 框架 - OSCHINA - 中文開源技術...
    Styled accordions are now included as a variationui styled accordionList - List item selectors are now more strict, list items must be immediate children ofui listorui list list
  • ElementUI 不維護了?供我們選擇的 Vue 組件庫還有很多!
    這裡放幾個知乎連結：element-ui 是不是不維護了如果 ElementUI 不維護了，也不再支持 Vue 3了我們該怎麼辦呢？仔細翻閱上述知乎回答，有些比較閒的作者已經 fork 了 ElementUI 的源碼，自己改造適配 Vue3，在此我只能說兩個字：敬佩。
  • vue-element-admin 4.0.0 正式版發布
    重大改變 基於 vue-cli@3進行構建 調整了項目的目錄結構 mock 文件移至根目錄下 layout 從 views 文件夾下移至 src 下 使用了最新的 eslint-plugin-vue
  • 如何在vue項目中使用sass並設置元素樣式
    JavaScriptsassCSS3 在創建vue框架項目時，可以使用CSS3定義元素樣式；還可以使用sass動態變量定義元素樣式。如果直接使用sass，啟動項目會出現報錯。那麼，如何在vue項目中使用sass？
  • 如何在Vue3框架中使用Element Plus
    切換到項目的根目錄，使用cd aam4、安裝項目的依賴模塊，使用命令npm install使用命令npm install安裝依賴模塊5、接著，使用命令npm run dev運行項目按照訪問地址，預覽界面效果7、按Ctrl + C快捷鍵，停止項目；然後使用命令npm i element-plus安裝element-plus
  • Vuetify - 廣受歡迎的 Material Design 風格的開源 UI 框架
    支持樹搖優化，能大大減少打包體積作為一個開源項目，大牌贊助商很多很堅挺，完全不用擔心會黃vuetify 贊助商列表Vuetify 使用體驗如何？Material Design 發布至今，因為其優秀獨特的操作體驗，被廣泛應用在各類應用程式的界面構建上。
  • 如何把ai,ei,ui,輕鬆讀準,孩子兩分鐘搞定
    這節課，主要是跟大家一起學習，雙韻母ai（哀），ei（誒），ui（威）。那麼，到底什麼是雙韻母呢？雙韻母和單韻母，到底是什麼關係呢？如何才能把雙韻母輕鬆地讀準確呢？雙韻母，簡單理解，就是把兩個單韻母組合在一起，或者是把一個單韻母和一個聲母組合在一起，共同發一個音。這就是雙韻母。之所以稱之為是雙韻母，主要是因為，它只有兩個字母，由兩個字母組合而成的。
  • 部編版一年級上冊漢語拼音9《ai ei ui》圖文講解
    微信公眾號改版 快來將我們設置為星標和置頂 方便更快地找到我們 課文朗讀視頻 1 根據教育部文件，今年秋季新學期開始，全國中小學將統一使用統編版語文教材
  • 漢語拼音ui和iu,到底有什麼不同,如何區分呢?
    其中，前兩個雙韻母發音比較簡單，孩子們掌握起來，還是比較輕鬆的。然而，最後一個雙韻母iu。看起來與上節課學習的雙韻母ui，非常的相似。孩子們在學習iu的時候，很難將這兩個漢語拼音字母的讀音給區分開。所以說，區分ui和iu，就是這節課學習的重點和難點。也是家長輔導孩子的重點。那麼，漢語拼音ui和iu，到底有什麼不同呢？如何將他們徹底區分開呢？
  • UI設計模式大閱兵
    Gmail採用簡單搜索51job用戶在使用簡單搜索輸入所需職位後，縱向布局的左邊面板提供諸如「發布時間、薪金」等條件，進一步優化信息Wufoo是一個在線表單設計網站，初始後會引導用戶建立表單14.其他模式還有兩種廣泛使用但在企業軟體很少使用的模式。
  • 萬興科技PDFelement 8.0版本全新發布:像操作Word一樣操作PDF文檔!
    PDFelement 8.0可以做到文檔秒開，文檔審閱無需等待，啟動速度從3s降低至1s，打開速度從1.5s降至0.5s，讓用戶感受極致順暢的辦公體驗。再者，面向全球市場發布的PDFelement 8.0，海外版已上線雲存儲功能，用戶可以輕鬆實現多端文件共享，輕鬆享受移動化辦公，預計國內版不久也將同步升級。
  • UI設計中配色設計攻略
    最近研究了一下配色方法，今天我就針對UI設計中配色設計攻略進行簡單的說明，希望能幫助到一部分小夥伴。有個有趣的研究成果 —— 「七秒鐘定律」：人們在挑選商品和服務時 ，只需要 7 秒鐘就可以確定是否感興趣，而在這短暫的 7 秒鐘內，色彩的作用佔到了 67%。一個設計作品呈現在用戶面前，最先進入眼帘的就是產品的視覺表現，而色彩在其中起到了很大的作用。