vue中使用elementUI

引入Element

因為整個項目是依賴ElementUI架構做的，是以采用了全部引入

1，在項目根目錄執行指令：npm i element-ui -S進行安裝

2，在main.js中引入element：

import Element from \'element-ui\'

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

Vue.use(Element)

3，在元件中直接使用

修改主題色

1，安裝sass：

npm install node-sass --save-dev

npm install sass-loader --save-dev

2，在src檔案夾下建立styles.scss檔案，并填入需要修改的主題顔色：

3,修改main.js中關于element的引入

import Element from \'element-ui\'

import \'./styles.scss\'

Vue.use(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檔案中，為自己的圖示添加一個類名，并引入需要的圖檔：

.el-icon-my-one{

background: url(../images/select/1.png) center no-repeat;

background-size: cover;

}

2，為圖檔添加占位符

.el-icon-my-one:before{

content: "替";

font-size: 12px;

visibility: hidden;

}

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中添加樣式