Element UI是一款桌面端組件庫，可以幫助用戶快速的搭建自己需要的UI框架，讓你的網(wǎng)站快速成型，提高用戶的工作效率，軟件界面非常簡單，可以輕松找到自己需要的功能。

軟件介紹

Element-UI組件庫是一款基于Vue 2.0的桌面端組件庫，是一款幫助網(wǎng)站快速成型工具，使用Element-UI組件庫可以快速設(shè)計自己需要的UI框架，這樣用戶在前端進(jìn)行開發(fā)時，就能在最短的時間內(nèi)完成網(wǎng)站的開發(fā)，極大的簡化了用戶的開發(fā)操作流程，提升用戶的工作效率。

軟件功能

1、指南：了解設(shè)計指南，幫助產(chǎn)品設(shè)計人員搭建邏輯清晰、結(jié)構(gòu)合理且高效易用的產(chǎn)品。

2、組件：使用組件 Demo 快速體驗交互細(xì)節(jié)；使用前端框架封裝的代碼幫助工程師快速開發(fā)。

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

4、資源：下載相關(guān)資源，用其快速搭建頁面原型或高保真視覺稿，提升產(chǎn)品設(shè)計效率。

軟件特色

【一致性 Consistency】

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

在界面中一致：所有的元素和結(jié)構(gòu)需保持一致，比如：設(shè)計樣式、圖標(biāo)和文本、元素的位置等。

【反饋 Feedback】

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

頁面反饋：操作后，通過頁面元素的變化清晰地展現(xiàn)當(dāng)前狀態(tài)。

【效率 Efficiency】

簡化流程：設(shè)計簡潔直觀的操作流程;

清晰明確：語言表達(dá)清晰且表意明確，讓用戶快速理解進(jìn)而作出決策;

幫助用戶識別：界面簡單直白，讓用戶快速識別而非回憶，減少用戶記憶負(fù)擔(dān)。

可控 Controllability

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

結(jié)果可控：用戶可以自由的進(jìn)行操作，包括撤銷、回退和終止當(dāng)前操作等。

安裝方法

Element UI并非是一個簡單的雙擊安裝軟件，想要安裝這款軟件需要在項目下進(jìn)行一定的操作，下面小編為大家?guī)碥浖陌惭b教程步驟，感興趣的用戶快來看看吧。

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)

使用教程

在完成軟件的安裝之后，接下來就是使用這款軟件進(jìn)行頁面的快速搭建了，很多用戶不知道怎么去使用element-ui中的組件，下面小編為大家?guī)斫坛蹋趺慈ナ褂眠@款軟件快速的搭建一個前端。

1、我們使用vue-cli腳手架工具搭建一個前端項目-然后安裝vue-cli【命令是npm install vue-cli -g】），然后我們利用命令【vue init webpack newtest】（newtest是項目的名稱，可以自己取名字），然后搭建好vue項目，詳細(xì)如下圖

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

3、安裝element到項目中以后，我們將完整引入整個element，下面是官網(wǎng)提供的方法，詳細(xì)如下圖

怎么引入

1、在項目的設(shè)計之后，接下來我們要把項目引入到軟件中，下面小編為大家?guī)眄椖康囊敕椒?，感興趣的用戶快來下載看看吧。

們開始引入element-ui，我們在創(chuàng)建好的項目中打開【src文件夾】-【main.js】下引入

import ElementUI from 'element-ui';

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

詳細(xì)如下圖

2、還是在【main.js】上加入

Vue.use(ElementUI);

這樣就引用element完成了，詳細(xì)如下圖

3、我們引用element以后，我們可以使用組件吧，我們上官網(wǎng)隨便找一個組件，例如單選框，下面是組件詳細(xì)的樣式和使用方法，詳細(xì)如下圖

4、我們在vue項目中復(fù)制代碼，我們找到【src】-【components】-【HelloWorld.vue】，中加入剛剛第五步，復(fù)制的代碼進(jìn)入，詳細(xì)的代碼如下圖

5、完成項目的引入

常見問題

1、表格字段過長省略？

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

2、如何獲取行數(shù)據(jù)作為方法參數(shù)？

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

3、如何綁定事件？

發(fā)現(xiàn)指定@click是沒有響應(yīng)的。官方的使用方法是，在command屬性指定操作命令，然后在里面制定用于處理command的操作方法，例如@command="handleCommand"，然后在里面類似做switch的操作，即根據(jù)不同的值來進(jìn)行對應(yīng)的操作。還有就是command可以直接就是方法名，然后在handleCommand方法里面，這樣調(diào)用：this[command]()。這樣就是直接調(diào)用methods方法集中的對應(yīng)方法。

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

4、如何通過代碼關(guān)閉message提示？

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

5、如何動態(tài)修改下拉框的可選項？

有些時候，當(dāng)前下拉框的選項取決于前一個下拉框的選中項，這時候就需要動態(tài)變動可選項。其中下來框的可選項一般都是通過v-for渲染的。如。那么動態(tài)修改可選項的話，直接修改要遍歷的數(shù)組就可以了，即修改items數(shù)組的內(nèi)容就可以了。另外如果當(dāng)前下拉選項由上一個下來框的選中值決定，那么上一個下來框就可以在@change方法里面進(jìn)行這個操作。

更新日志

Bug 修復(fù)

Autocomplete

修復(fù) 'change event' 錯誤 (#19200 by @sxzz)

Image

更新錯誤狀態(tài) (#19194 by @lhx6538665)

Optimization

I18n

更新 ru-RU popconfirm 翻譯 (#19220 by @Opppex)

更新 vi 翻譯 (#19244 by @quangln2810)

更新 Catalan 和 Spanish 翻譯 (#19296 by @Ismaaa)

更新 Indonesia 翻譯 (#19320) by @therour)

更新 Brazilian Portuguese 翻譯 (#19374 by @diegomengarda)