【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>

效果如下图。

未展开:

展开:

相关推荐
tanxiaomi11 小时前
通过HTML演示JVM的垃圾回收-新生代与老年代
前端·jvm·html
palpitation9711 小时前
Android App Links 配置
前端
FuckPatience11 小时前
Vue 组件定义模板,集合v-for生成界面
前端·javascript·vue.js
sophie旭11 小时前
一道面试题,开始性能优化之旅(3)-- DNS查询+TCP(三)
前端·面试·性能优化
开心不就得了11 小时前
构建工具webpack
前端·webpack·rust
gerrgwg11 小时前
Flutter中实现Hero Page Route效果
前端
不枯石11 小时前
Matlab通过GUI实现点云的ICP配准
linux·前端·图像处理·计算机视觉·matlab
hhzz12 小时前
Pythoner 的Flask项目实践-在web页面实现矢量数据转换工具集功能(附源码)
前端·python·flask
lypzcgf12 小时前
Coze源码分析-资源库-编辑工作流-前端源码-核心流程/API/总结
前端·工作流·coze·coze源码分析·智能体平台·ai应用平台·agent平台
lypzcgf12 小时前
Coze源码分析-资源库-编辑工作流-前端源码-核心组件
前端·工作流·coze·coze源码分析·智能体平台·agent平台