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组件样式的，你们能够根据本身的实际状况来进行选取。