el-menu

el-menu的default-active屬性支持默認(rèn)選中項(xiàng)，切換時(shí)也會(huì)自動(dòng)切換這個(gè)效果，然鵝，如果你直接訪問(wèn)不是默認(rèn)選項(xiàng)的地址，就尷尬了；此時(shí)就需要?jiǎng)討B(tài)選中默認(rèn)項(xiàng)。
如果換成下面的寫(xiě)法就美滋滋啊，router屬性還可以讓頁(yè)面直接跳轉(zhuǎn)；$route.path與數(shù)據(jù)無(wú)關(guān)，而是當(dāng)前頁(yè)面的地址.

<el-menu :default-active="$route.path" router> 
<el-menu-item v-for="route in routes" :key="route.path" :index="route.path">{{route.name}}
</el-menu-item> 
</el-menu>

data () { 
return { 
routes: [ 
{path: '/home/link1', name: '頁(yè)面1'}, 
{path: '/home/link2', name: '頁(yè)面2'},
{path: '/home/link3', name: '頁(yè)面3'}, 
{path: '/home/link4', name: '頁(yè)面4'}, 
{path: '/home/link5', name: '頁(yè)面5'} 
] 
} 
}

form

不得不說(shuō)element form的驗(yàn)證很自由很舒服，寫(xiě)在form-item上可以，寫(xiě)在data里面rules也可以，巴拉巴拉；
不過(guò)驗(yàn)證一定要加入prop屬性，prop需要綁定傳入 Form 組件的 model 中的字段；
記一個(gè)特殊的例子：動(dòng)態(tài)增減表單項(xiàng)
這個(gè)例子的驗(yàn)證建議直接required寫(xiě)完事了。。

修改主題顏色

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

theme-chalk下的index.css就是我們使用的主題默認(rèn)顏色了，我們的目的就是把它換掉。
在官網(wǎng)可以看到提供的兩個(gè)做法；
如果僅替換主題色
推薦使用在線主題生成工具，切換一個(gè)顏色然后下載，解壓之后，在項(xiàng)目目錄下新建theme目錄，放入壓縮包的fonts目錄和index.css。
然后在main.js中引入新的index.css，別忘了把默認(rèn)的主題顏色刪掉；

這樣就算是完成了替換主題色。
如果需要自定義寫(xiě)顏色，那就仔細(xì)研究一下官網(wǎng)提供的做法。

預(yù)覽圖片

elementui自帶的圖片預(yù)覽框架有點(diǎn)弱啊，雖然可以打開(kāi)一組特定圖，但是無(wú)法控制順序等等。
單張圖怎么預(yù)覽呢？通過(guò)點(diǎn)擊圖片或者按鈕或者其它的方式？
1，import

import ElImageViewer from 'element-ui/packages/image/src/image-viewer'

2，設(shè)置data為默認(rèn)顯示為false

showViewer: false, 
imgUrl: null

3，methods增加事件

openFile () { 
this.imgUrl = '圖片地址' 
this.showViewer = true 
}, 
closeViewer () { 
this.showViewer = false 
}

4，template增加代碼
<el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="[imgUrl]"></el-image-viewer>
5，本來(lái)我以為這個(gè)方法只能預(yù)覽單張圖片，經(jīng)過(guò)對(duì)引入文件的解讀，發(fā)現(xiàn)可以使用:on-switch方法來(lái)處理圖片組的翻動(dòng)，此時(shí):url-list=圖片數(shù)組。

對(duì)這段方法有疑問(wèn)的可以去看一下第一步引入的文件，參考了其內(nèi)部自帶的功能。

當(dāng)一個(gè)頁(yè)面有多個(gè)upload組件的時(shí)候，如何區(qū)分上傳得到的結(jié)果來(lái)源。

如果是靜態(tài)的，可以在on-change的時(shí)候?qū)懖煌氖录@沒(méi)什么說(shuō)的；如果是for出來(lái)的怎么辦？on-change都是一樣的。
有人說(shuō)要去改源碼，這有多坑？如果你打包給同事的時(shí)候，沒(méi)有打入node_modules，如果你備份的時(shí)候沒(méi)有備份node_modules。。。所有改源碼不靠譜。
看教程那邊，on-remove、on-change等事件返回的都是file和fileList，沒(méi)有識(shí)別可以用到的關(guān)鍵字。用以下方法可以解決這個(gè)問(wèn)題：第三個(gè)參數(shù)可以用來(lái)放你的標(biāo)志，index，key都可以。

:on-change="(res,file)=>{return handleChange(res, file, index)}"

表單驗(yàn)證無(wú)效

如果B字段是否顯示要根據(jù)A字段的結(jié)果來(lái)驗(yàn)證，可以使用 this.$refs.ruleForm.validateField('checkB') 的方法來(lái)觸發(fā)綁定的驗(yàn)證。
在看同事代碼的時(shí)候發(fā)現(xiàn)默認(rèn)的validate方法沒(méi)有生效，沒(méi)發(fā)現(xiàn)邏輯有什么問(wèn)題，最后是因?yàn)樽远x的校驗(yàn)方法，有一項(xiàng)沒(méi)有包含callback()。所以自定義的校驗(yàn)方法一定要包含callback()啊

自定義表單驗(yàn)證

自定義表單驗(yàn)證的時(shí)候，如果有幾個(gè)參數(shù)用的是同一個(gè)方法，如何加上關(guān)鍵字的標(biāo)記呢？
默認(rèn)的自定義校驗(yàn)方法：

{ validator: checkAge, trigger: 'blur' }

帶參數(shù)的校驗(yàn)方法(用一個(gè)箭頭函數(shù)，帶上一個(gè)關(guān)鍵字即可)

{ validator: (rule, value, callback) => {this.customMethod(rule, value, callback, yourKeyword)}, trigger: 'blur' }

select的value-key

如果綁定的model數(shù)據(jù)是一個(gè)object而不是字符串的時(shí)候，一定要加這個(gè)屬性