vue-element-ui的各种弹出框样式修改

1、组件中存在popper-append-to-body属性

1、组件中存在popper-append-to-body属性，例如select选择器等
直接在引用该组件的.vue文件中修改弹出框样式，使用popper-append-to-body属性，然后使用 ‘/deep/’ 修改样式

找到所需修改的样式修改即可

<el-select v-model="value" placeholder="请选择"  :popper-append-to-body="false">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  ...
<style scoped lang="less">
/deep/ .el-select-dropdown__list{
	//修改样式
}
</style>

2、使用popper-class属性修改弹出框样式

2、使用popper-class属性修改弹出框样式，例如：Select选择器、cascader级联选择器、时间日期选择器等
不加scoped，即在全局样式中添加，容易影响全局样式

<el-tooltip content="Top center" placement="top" popper-class="pop-class">
  <el-button>Dark</el-button>
</el-tooltip>
  ...
  <style lang="less">
  	//tooltip弹出框
	.pop-class{
	  line-height: 0px !important;
	  height: 21.67px !important;
	  background: #F25E39 !important;
	  .popper__arrow{
	    display: block !important;
	  }
	  .popper__arrow::after{
	    border-top-color: #F25E39 !important;
	  }
	}
  </style>

3、组件不存在popper-append-to-body属性和popper-class属性（例如el-table中的筛选弹出框），或不想影响全局样式

3、组件不存在popper-append-to-body属性和popper-class属性（例如el-table中的筛选弹出框），或不想影响全局样式
为包含该组件的div添加类名,
当#app的子元素存在.purchasing元素时，修改#app兄弟元素 .el-select-dropdown__list 的样式

<div class="purchasing">
<el-table
    ref="filterTable"
    :data="tableData"
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      sortable
      width="180"
      column-key="date"
      :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
      :filter-method="filterHandler"
    >
    </el-table-column>
  </el-table>
</div>
...
<style lang="less">
	#app:has(.purchasing) ~ .el-select-dropdown__list{
		//修改样式
	}
</style>

这篇好文章是转载于：学新通技术网