细节

Icons

从 @element-plus/icons-vue 中导入所有图标并进行全局注册。

（main.ts）

import * as ElementPlusIconsVue from '@element-plus/icons-vue'

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

只注入单个图标供路由侧边栏菜单使用（可减少资源加载） （main.ts）

import { DataBoard } from "@element-plus/icons-vue"

app.component("DataBoard", DataBoard)

Element Plus 中文包

引用element组件时会显示英文（比如分页组件），使用中文包后显示即为中文

（App.vue）

// Element Plus 中文包
import zhCn from "element-plus/es/locale/lang/zh-cn"

<el-config-provider :locale="zhCn">
  <router-view></router-view>
</el-config-provider>

el-card修改.el-card__body样式

设置el-card的高度后，子元素无法继承el-card的高度，因为中间还有一层样式为.el-card__body的div

修改.el-card__body样式方法

:deep(.el-card__body) {
  height:100%
}

el-select修改样式（展示框及下拉列表，下拉选项样式）

不生效时加:deep(.el-select-dropdown__list)，或style不加scoped

展示框样式.el-select__wrapper

下拉列表样式.el-select-dropdown__list

下拉选项样式.el-select-dropdown__item

<el-select
  v-model="adjustedStemIndexValue"
  placeholder="Select"
  style="width: 140px"
  popper-class="custom-select"
  class="custom"
>
  <el-option
    v-for="item in heavenlyStemsOptions"
    :key="item.value"
    :label="item.label"
    :value="item.value"
  />
</el-select>

如上代码加popper-class="custom-select"，只作用在该下拉框上，不然作用全局下拉选

测试生效样式如下

<style scoped>
.custom-select .el-select-dropdown__item {
  background-color: red;
}
</style>

<style>
.custom-select .el-select-dropdown__list {
  background-color: black;
}
</style>

去除下拉列表的滚动条
<style>
.custom-select .el-scrollbar .el-select-dropdown__wrap {
  max-height: none !important;
  overflow-y: auto !important;
}
.custom-select.el-select-dropdown {
  max-height: none !important;
}
</style>