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

javascript 复制代码
//更改箭头位置
.el-tree-node__content > .el-tree-node__expand-icon {
  position: absolute;
  right: 12px;
}
javascript 复制代码
//更改箭头图片
.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;
}
相关推荐
二两锅巴几秒前
📺 无需Electron!前端实现多显示器浏览器窗口精准控制与通信
前端
炸土豆4 分钟前
防抖节流里的this传递
前端·javascript
用户4099322502125 分钟前
Vue3中动态样式数组的后项覆盖规则如何与计算属性结合实现复杂状态样式管理?
前端·ai编程·trae
山璞7 分钟前
Flutter3.32 中使用 webview4.13 与 vue3 项目的 h5 页面通信,以及如何调试
前端·flutter
努力早日退休10 分钟前
Antd Image标签父元素会比图片本身高几个像素的原因
前端
林希_Rachel_傻希希10 分钟前
手写Promise--教学版本
前端·javascript·面试
ETA814 分钟前
`console.log([1,2,3].map(parseInt))` 深入理解 JavaScript 中的高阶函数与类型机制
前端·javascript
呼叫694514 分钟前
图片列表滚动掉帧的原因分析与解决方案
前端
狗哥哥17 分钟前
AI 驱动前端自动化测试:一套能落地、能协作、能持续的工程化方案
前端·测试
全栈老石21 分钟前
别再折腾端口转发了:使用 Cloudflare Tunnel 优雅地分享你的 localhost
前端·后端·全栈