自定义 Element Plus 树状表格图标

在开发使用 Element Plus 的树状表格时，默认的展开/收起图标可能不能满足设计需求。为了更符合项目要求，可以通过覆盖样式的方式来自定义这些图标。以下记录了实现自定义树状表格图标的完整过程。

实现效果

1. 有子节点且未展开时：显示一个加号图标（circle-plus.svg）。

2. 有子节点且已展开时：显示一个减号图标（RemoveFilled.svg），并添加旋转动画。

3. 没有子节点时：隐藏展开/收起图标。

<el-table class="custom-table"></el-table>


/* 自定义树状表格图标 */
/* 有子节点 且未展开 */
.custom-table :deep(.el-table__expand-icon) {
  background: url('../../../../assets/svg/circle-plus.svg') no-repeat;
  content: '';
  width: 16px;
  height: 16px;
  font-size: 16px;
  background-size: 16px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* 有子节点 且已展开 */
.custom-table :deep(.el-table__expand-icon--expanded) {
  background: url('../../../../assets/svg/RemoveFilled.svg') no-repeat;
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  font-size: 16px;
  background-size: 16px;
  transform: rotate(180deg); /* 展开时旋转 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 没有子节点 */
.custom-table :deep(.el-table__placeholder::before) {
  background: url('../../../../assets/svg/youtube.svg') no-repeat;
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  font-size: 16px;
  background-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  display: none; /* 隐藏没有子节点的图标 */
}

总结

通过覆盖 Element Plus 默认样式，可以轻松实现自定义树状表格的图标。以上示例展示了如何根据节点的不同状态（未展开、已展开、无子节点）应用不同的图标效果。

 

 

原文地址：https://blog.csdn.net/qq_26631337/article/details/144758747

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！