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

自定义 Element Plus 树状表格图标

news 2025/1/2 14:38:14

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

实现效果

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

<el-table:data="tableData":tree-props="{ children: 'children' }":default-expand-all="false":expand-row-keys="expandRowKeys"@expand-change="handleExpandChange"row-key="id"class="custom-table"></le-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; /* 隐藏没有子节点的图标 */
}