更改elementui的箭头图片以及位置

最新推荐文章于 2024-06-07 17:44:16 发布

EstherNi

最新推荐文章于 2024-06-07 17:44:16 发布

阅读量1k

点赞数 6

文章标签： elementui 前端 javascript

本文链接：https://blog.youkuaiyun.com/EstherNi/article/details/136318202

版权

文章详细描述了如何修改ElementUI中的El-Tree组件中箭头图标的位置、旋转以及在不同子节点状态下的背景图片，包括展开和未展开时的样式变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

//更改箭头位置
.el-tree-node__content > .el-tree-node__expand-icon {
  position: absolute;
  right: 12px;
}

//更改箭头图片
.el-tree-node__expand-icon {
  transform: rotate(-90deg);
}
.el-tree-node__expand-icon.expanded {
  transform: rotate(0deg);
}
// 有子节点 且已展开
.el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
  background: url('~@/assets/images/arrow.png') no-repeat 0 3px;
  content: '';
  display: block;
  width: 12px;
  height: 12px;
  font-size: 12px;
  background-size: 12px;
}
// 有子节点 且未展开
.el-tree .el-icon-caret-right:before {
  background: url('~@/assets/images/arrow.png') no-repeat 0 3px;
  content: '';
  display: block;
  width: 12px;
  height: 12px;
  font-size: 12px;
  background-size: 12px;
}
// 没有子节点
.el-tree .el-tree-node__expand-icon.is-leaf::before {
  background: #fff;
  content: '';
  display: block;
  width: 0px;
  height: 0px;
  font-size: 0px;
  background-size: 0px;
}

请添加图片描述