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

 表單添加正則驗證

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM