Vue实现深度样式改变

在当前组件中引用了element-ui的组件,但是想要修改element-ui的样式，又不想放弃scoped这个组件私有化样式，element-ui的组件相对于当前组件来说是他的子组件，使用scoped 关键字当前组件的样式对子组件是不生效的。通过::v-deep 加在需要改变子组件的class前面可以实现这个效果

// 使用::v-deep 实现样式穿透,改变子组件的样式
::v-deep.el-dropdown-menu {
  width: 400px;
  .item_name {
    width: 90%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
::v-deep.el-dropdown-menu__item i {
  position: absolute;
  line-height: 36px;
  right: 14px;
  font-size: 16px;
  color: #2864f0;
}