vue+Elment-UI，修改element組件樣式

　　在用vue開發項目過程當中，咱們老是避免不了的會使用到elementUI，它裏面提供的一些組件都爲咱們的開發帶來了很大的便利，可是，當有時候咱們須要使用這些組件的同時又要修改下組件的UI樣式的話，咱們該怎麼去作呢？接下來咱們來看下。

　　

　　如上圖所示，elementUI的多選框是方框的，那麼若是咱們須要一個圓形的選擇框的話，怎麼辦呢，這個時候咱們第一時間想到的應該就是border-radius:50%;可是怎麼往上加呢，咱們接下來看一看

　　首先，咱們須要選中要改變樣式的組件，而後鼠標右鍵檢查元素，找到該組件的類名，而後在style裏面直接將該類名的樣式進行修改就能夠了，代碼以下：

<style>
  .el-checkbox__inner {   // 對應的組件的類名
  　　border-radius: 50%;
  }
</style>

　　上面的這個方法已經能夠改變組件的樣式了，可是這裏存在一個問題，在style裏面改變的樣式是全局的，也就是說，若是咱們在其餘頁面裏面也用到了這個組件的話，其餘頁面的樣式也會被咱們改變，顯然這不是咱們想要的，那麼咱們如何作到只改變相應的頁面裏面的組件樣式呢？這時候咱們就須要用到scoped這個屬性了。

　　那麼scoped的做用是什麼呢？scoped是Vue裏面style標籤的一個特殊屬性，當一個style標籤擁有scoped屬性的時候，就至關於說明它裏面的樣式只做用於當前這個Vue頁面，不會污染到全局的樣式，從而實現了組件樣式的模塊化，那麼它是怎麼實現的呢？其實若是咱們給style標籤加上了scoped屬性，在編譯的時候，他會給咱們組件裏面的每個樣式加一個自定義的屬性data-v-5558821a,從而經過給含有這個自定義屬性的標籤加上樣式，從而實現了部分樣式的穿透。因此咱們只須要這樣：

<style scoped>
.edit_dev >>> .el-checkbox__inner { // 這裏咱們要注意，想要修改組件樣式的話，必須先用一個原生標籤將這個組件包起來，而後經過父查子的方式來找到組件的類，注意這裏的>>>是不可少的，要經過這個來查找
  　border-radius: 50%;
  }
</style>

　　固然這裏還有另一個方法，就是經過less以及sass的方式來實現穿透，代碼以下：

<style scoped lang="less">
　.edit_dev {
　　/deep/ .el-checkbox__inner{  // less語法要經過/deep/ 來找到子級的類
　　　border-radius: 50%;
　　}
　}
</style>

　　以上三種方法都是能夠實現改變element組件樣式的，你們能夠根據本身的實際狀況來進行選取。