ElementPlus

动态引入icon

再main.ts中进行批量导入图标后

// 在main.ts注册Icon组件
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

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

通过component的is属性切换icon

<component :is="Fold"></component>

tree

tree组件背景色修改
穿透css改变tree的背景色

::v-deep .el-tree{
  background-color: #f5f5f5;
}

tree组件鼠标hover悬浮背景色
穿透css改变el-tree-node__content的背景色

::v-deep.el-tree-node__content{
  &:hover{
    background-color: red;
  }
}

tree组件选中背景色修改
穿透css改变el-tree-node.is-current > .el-tree-node__content的背景色

::v-deep.el-tree-node.is-current > .el-tree-node__content {
    background-color: black !important;
  }

节点内容自适应内容高度

.el-tree-node__content{
  height: auto;
}