虽然element提供的样式丰富，但是设计往往会设计出更好看的样式，我们还是要把样式改过来 但是单单\deep\是改不掉的，popper-class属性便可很好的解决。

例如：如何去掉el-color-pick的取消按钮

方法一：

el-color-pick,el-date-picker等组件点击的弹出框是挂载到body上，不做处理无法使用继承，所以！！popper-class就登场了！

1.popper-class要搭配:popper-append-to-body="false"使用

 <el-color-picker 
     :popper-append-to-body='false' 
     class='picker-config' 
     v-model='formConfig.fullColor' 
     @active-change='fillColor'>
</el-color-picker>

2.看控制台层级结构写样式即可

<style lang='less'>
.el-color-dropdown {
  .el-color-dropdown__btns {
    .el-color-dropdown__link-btn {
      display: none !important;;
    }
  }
}
</style>

注意：不能写在scop下，可以多开一个<style>标签 ,若不生效加上deep或important试试

效果图

方法二：


<style lang="scss" >
	.el-color-dropdown__link-btn-perform{
		display: none;
	}
</style>

 在打开颜色选择时调用

let obj = document.querySelector(".el-color-dropdown__link-btn");
if(obj){
	obj.className = "el-color-dropdown__link-btn-perform";
}

效果同上 

el-select使用poper-class案例：“https://qdmana.com/2022/127/202205071839176714.html

# elementui # vue.js # javascript # less
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

教你如何搞定springboot集成kafka

avatar 华为云开发者联盟
cover

共创数字经济新生态，华为云生态领航者·AI先遣队圆满落幕

avatar 华为云开发者联盟
cover

如何使用Python和Plotly绘制3D图形

avatar 华为云开发者联盟