当前位置：首页 > article >正文

自定义 Element Plus 树状表格图标

article 2024/12/28 21:06:25

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

实现效果

有子节点且未展开时：显示一个加号图标（circle-plus.svg）。
有子节点且已展开时：显示一个减号图标（RemoveFilled.svg），并添加旋转动画。
没有子节点时：隐藏展开/收起图标。

<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; /* 隐藏没有子节点的图标 */
}