引入Element
因為整個項目是依賴ElementUI框架做的,所以采用了全部引入
1,在項目根目錄執行命令:npm i element-ui -S進行安裝
2,在main.js中引入element:
3,在組件中直接使用
修改主題色
1,安裝sass:
npm install node-sass --save-dev
npm install sass-loader --save-dev
2,在src文件夾下新建styles.scss文件,並填入需要修改的主題顏色:
3,修改main.js中關於element的引入
修改element的默認樣式
1,在src下的assets文件夾下的css文件夾下新建ele.css
2,正常情況下,我們組件的樣式是寫在<style>里面的,並且為了保證只在當前組件內使用該樣式,會在style 中添加scoped。如果某個組件內使用的element組件的樣式需要修改,我們需要在giant組件中林外添加<style>,然后在新加的這個<style>中引入上面新建的ele.css。這個新建的<style>一定不能添加scoped。
3,通過元素查看器找到需要修改的樣式的類名,然后在ele.css中重新賦樣式。
使用自定義圖標
在element中,為用戶提供了一套圖標,用戶可以采用下面等方式很輕松的使用這些圖標:
但是組件提供的圖標是有限的,如果用戶需要為按鈕添加一個新的圖標,但是這個組件庫里面沒有這個圖標,用戶可以采用下面的步驟,使用自己的圖標:
1,在上面新建的ele.css文件中,為自己的圖標添加一個類名,並引入需要的圖片:

3,使用該圖標
回車事件
有的時候,用戶在輸入以后,習慣用回車來觸發請求,所以常常需要在input框中添加回車事件:
但是有的時候,這個回車事件並不會觸發我們綁定的事件,而是刷新了頁面,為此,我們需要為input所在的form表單添加@submit.native.prevent阻止頁面的刷新:
table使用
多級表頭
只需要在 el-table-column 里面嵌套 el-table-column,就可以實現多級表頭。
一個單元格顯示兩個字段信息
在上面例子中,我們可以通過為el-table-column添加prop字段,就可以為當前列綁定一個字段信息,但有的時候,需要將兩個字段信息放置在一個單元格里面:
在這個圖片中展示的是需要將時間和地點放置在一個單元格里面,但是我們從后台獲取數據的時候,地點和時間應該是分開存的,需要在el-table-column中添加template:
表頭添加紅色星號
1,因為label中的字體顏色是黑色,要想添加紅色的星號,可以考慮通過樣式添加,利用header-cell-class-name為需要的列添加一個樣式:
2,在methods中添加must方法,指定列
3,在ele.css中添加樣式
表單添加正則驗證