軟件介紹

Element-UI是一款專門提供給開發者、設計師和產品經理等多種職業使用的網站快速成型工具，這款軟件會為用戶提供UI框架，這樣你在進行前端開發的時候，就可以通過Element-UI組件庫來獲取到最全的配套設計資源，從而讓你在最短時間內完成網站開發。

軟件簡介

Element ui是由國產團隊基于vue.js 2.0打造的桌面端UI框架，主要知用于開發者、設計師和產品經理等前端設計人員打造，該框架大大地簡化了操作流程，配合準備好的設計資源能夠幫助開發者快速設計出滿意的網站，可以大大地減少了開發人員的人力和時間，有從事前端開發的設計人員快快下載吧。

Element-UI軟件特色

指南

了解設計指南，幫助產品設計人員搭建邏輯清晰、結構合理且高效易用的產品。

組件

使用組件 Demo 快速體驗交互細節；使用前端框架封裝的代碼幫助工程師快速開發。

主題

在線主題編輯器，可視化定制和管理站點主題、組件樣式

資源

下載相關資源，用其快速搭建頁面原型或高保真視覺稿，提升產品設計效率。

Element-UI軟件優勢

一致性 Consistency

與現實生活一致：與現實生活的流程、邏輯保持一致，遵循用戶習慣的語言和概念;

在界面中一致：所有的元素和結構需保持一致，比如：設計樣式、圖標和文本、元素的位置等。

反饋 Feedback

控制反饋：通過界面樣式和交互動效讓用戶可以清晰的感知自己的操作;

頁面反饋：操作后，通過頁面元素的變化清晰地展現當前狀態。

效率 Efficiency

簡化流程：設計簡潔直觀的操作流程;

清晰明確：語言表達清晰且表意明確，讓用戶快速理解進而作出決策;

幫助用戶識別：界面簡單直白，讓用戶快速識別而非回憶，減少用戶記憶負擔。

可控 Controllability

用戶決策：根據場景可給予用戶操作建議或安全提示，但不能代替用戶進行決策;

結果可控：用戶可以自由的進行操作，包括撤銷、回退和終止當前操作等。

Element-UI安裝步驟

1.在項目下輸入 npm install element-ui -S

2.查看配置文件package.json，是否有element-ui組件的版本號 如下圖：

3.安裝成功后 ，在node_modules中可以看到 element-ui的文件夾 ，所有安裝的源文件可以在這里面找到

4. 在main.js文件中引入element組件：

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

Element-UI使用方法

element-ui框架怎么搭前臺？

第一步，我們使用vue-cli腳手架工具搭建一個前端項目（如果沒有安裝我們可以先安裝node【上官網下載安裝就可以】-然后安裝vue-cli【命令是npm install vue-cli -g】），然后我們利用命令【vue init webpack newtest】（newtest是項目的名稱，可以自己取名字），然后搭建好vue項目，詳細如下圖

第二步，搭建好vue前端項目以后，我們安裝element到項目中，我們利用命令行工具指定到項目根目錄中，然后輸入命令【npm i element-ui -S】，詳細如下圖

第三步，安裝element到項目中以后，我們將完整引入整個element，下面是官網提供的方法，詳細如下圖

第四步，根據官網的教程，我們開始引入element-ui，我們在創建好的項目中打開【src文件夾】-【main.js】下引入

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

詳細如下圖

第五步，還是在【main.js】上加入

Vue.use(ElementUI);

這樣就引用element完成了，詳細如下圖

第六步，我們引用element以后，我們可以使用組件吧，我們上官網隨便找一個組件，例如單選框，下面是組件詳細的樣式和使用方法，詳細如下圖

第七步，我們在vue項目中復制代碼，我們找到【src】-【components】-【HelloWorld.vue】，中加入剛剛第五步，復制的代碼進入，詳細的代碼如下圖

第八步，我們運行項目（利用命令行工具指定到項目的根地址，然后運行【npm run dev】），然后就可以在網頁上查看效果了，發現和element官網上的一樣，大功告成，詳細如下圖

常見問題

1.表格字段過長省略？

elmentUI的table-column有提供屬性 show-overflow-tooltip 只要在對應的字段上設置為true，則文本超出部分就會用省略號替代，并且鼠標移至其上時，可查看完整信息。

2.如何獲取行數據作為方法參數？

如果要為表格的每一行都添加操作按鈕，如刪除。這些刪除按鈕綁定的是同一個方法，那么如何區分是誰調用的呢，答案就是在方法中傳入參數，而這些參數就是在渲染的時候寫死在@click的方法參數里面。獲取本行數據的方法就是scope.row.xxx，其中xxx就是本行數據的某一個屬性。如：@click="delete(scope.row.id)

3.<el-dropdown-item>如何綁定事件？

發現<el-dropdown-item>指定@click是沒有響應的。官方的使用方法是，在command屬性指定操作命令，然后在<el-menu>里面制定用于處理command的操作方法，例如@command="handleCommand"，然后在里面類似做switch的操作，即根據不同的值來進行對應的操作。還有就是command可以直接就是方法名，然后在handleCommand方法里面，這樣調用：this[command]()。這樣就是直接調用methods方法集中的對應方法。

但是，如果方法需要傳遞參數呢，用這種方法就不好做了。總不能再在這個command字符串中去把方法名和參數分別解析出來吧，那太麻煩了。解決方法就是@click.native="func"，這種方式可以直接調用methods方法集中的對應方法，傳參自然就沒問題了。

4.如何通過代碼關閉message提示？

一般我拋出提示信息，是直接this.$message。但是存在這樣的情境，即我完成了一個操作后，這個提示應該被立即關閉，而不是等它超時消失。答案就是，this.$message實際上會返回message對象的引用，那么我們定義一個變量來存這個引用，然后在需要的使用調用close方法即可。如  messageHandle = this.$message(...)     messageHandle.close()

5.如何動態修改下拉框的可選項？

有些時候，當前下拉框的選項取決于前一個下拉框的選中項，這時候就需要動態變動可選項。其中下來框的可選項<el-option>一般都是通過v-for渲染的。如<el-option v-for="item in items" ....>。那么動態修改可選項的話，直接修改要遍歷的數組就可以了，即修改items數組的內容就可以了。另外如果當前下拉選項由上一個下來框的選中值決定，那么上一個下來框就可以在@change方法里面進行這個操作。