Element-UI最新版是專業(yè)性比較高的桌面端組件庫(kù)工具，Element-UI最新版可以快速設(shè)計(jì)用戶自己需要的UI框架，所以用戶在進(jìn)行前端開發(fā)的時(shí)就可以通過(guò)它來(lái)獲取到最全的配套設(shè)計(jì)資源，從而讓用戶在最短時(shí)間內(nèi)完成網(wǎng)站開發(fā)，從而提升用戶的工作效率。Element-UI官方版是基于Vue 2.0的桌面端組件庫(kù)，并且軟件專為開發(fā)者、設(shè)計(jì)師和產(chǎn)品經(jīng)理準(zhǔn)備的。

軟件功能

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

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

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

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

Element UI軟件特色

      【一致性 Consistency】

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

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

      【反饋 Feedback】

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

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

      【效率 Efficiency】

      簡(jiǎn)化流程：設(shè)計(jì)簡(jiǎn)潔直觀的操作流程;

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

      Element-UI最新版幫助用戶識(shí)別：界面簡(jiǎn)單直白，讓用戶快速識(shí)別而非回憶，減少用戶記憶負(fù)擔(dān)。

      可控 Controllability

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

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

更新日志

      Element UI 官方版 2.13.2

      Bug 修復(fù)

      Autocomplete

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

      Image

      更新錯(cuò)誤狀態(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)

FAQ

      1、表格字段過(guò)長(zhǎng)省略?

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

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

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

      3、如何綁定事件?

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

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

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

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

      5、如何動(dòng)態(tài)修改下拉框的可選項(xiàng)?

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