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

Jessica07062025-08-23 10:07

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

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>

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

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

向右的未展开箭头

向下的展开箭头

但是，事实上，在展开时这个箭头会自动逆时针旋转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>

效果如下图。

未展开：

展开：