【Vue3+Element Plus】修改el-table树形结构的默认箭头样式

博主一开始是采取了网上的方法,使用了以下的代码:

css 复制代码
::v-deep .el-icon-arrow-right {
  color: #49c0ff;
}
 
::v-deep.el-table .el-table__expand-icon {
  .el-icon-arrow-right:before {
    content: "\e791";
  }
}

且在修改为Vue3支持的格式后,发现这段代码无效。

随后博主找到了现在的Element Plus中的icon部分,发现现在的右向实心箭头和以前的版本不同。

博主在网页修改了el-table中的箭头的d,发现这一方法确实可以改变箭头,但无法在vue文件中对svg的path的d进行改变。(如果有大佬知道怎么用这个改可以发个评论吗?)

ini 复制代码
<path 
    fill="currentColor"
    d="M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z" 
    style="d: path(&quot;M 384 192 v 640 l 384 -320.064 Z&quot;);">
</path>

然后,博主再尝试了插槽也失败后,经过一番探索,决定隐藏原生的箭头,并自己画一个。

博主的目标是在一个正方形中画出以下两个箭头。

  1. 向右的未展开箭头
  1. 向下的展开箭头

​但是,事实上,在展开时这个箭头会自动逆时针旋转90°,所以其实只需要画两个向右箭头就可以了。

至于如何画出这个箭头,博主使用了clip-path: polygon()进行绘制,其规则如下:

scss 复制代码
polygon(x1 y1, x2 y2, x3 y3, x4 y4, xn yn)

最后的实现代码如下:

xml 复制代码
<style scoped>
/* 箭头部分 */
:deep(.el-table .el-table__expand-icon) {
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  cursor: pointer;
}

/* 隐藏原有的箭头 */
:deep(.el-table .el-table__expand-icon .el-icon) {
  display: none;
}

/* 未展开状态:向右的三角形 */
:deep(.el-table .el-table__expand-icon:not(.el-table__expand-icon--expanded)) {
  border-width: 6px;
  border-color: #606266;
  clip-path: polygon(25% 0, 25% 100%, 75% 50%);
}

/* 展开状态:向下的三角形 */
:deep(.el-table .el-table__expand-icon--expanded) {
  border-width: 6px;
  border-color: #606266;
  clip-path: polygon(25% 0, 25% 100%, 75% 50%);
}
</style>

效果如下图。

未展开:

展开:

相关推荐
JIngJaneIL21 分钟前
篮球论坛|基于SprinBoot+vue的篮球论坛系统(源码+数据库+文档)
java·前端·数据库·vue.js·论文·毕设·篮球论坛系统
程序猿阿伟2 小时前
《首屏加载优化手册:Vue3+Element Plus项目提速的技术细节》
前端·javascript·vue.js
fruge3 小时前
Vue Pinia 状态管理实战指南
前端·vue.js·ubuntu
sean4 小时前
开发一个自己的 claude code
前端·后端·ai编程
用户21411832636024 小时前
dify案例分享-用 Dify 一键生成教学动画 HTML!AI 助力,3 分钟搞定专业级课件
前端
太过平凡的小蚂蚁6 小时前
Kotlin 协程中常见的异步返回与控制方式(速览)
开发语言·前端·kotlin
咖啡の猫7 小时前
Vue初始化脚手架
前端·javascript·vue.js
晨枫阳7 小时前
uniapp兼容问题处理总结
前端·vue.js·uni-app
liusheng8 小时前
腾讯地图 SDK 接入到 uniapp 的多端解决方案
前端·uni-app
拉不动的猪8 小时前
如何处理管理系统中(Vue PC + uni-app 移动端):业务逻辑复用基本方案
前端·javascript·架构