diff --git a/src/assets/packup_icon.png b/src/assets/packup_icon.png new file mode 100644 index 0000000..a438155 Binary files /dev/null and b/src/assets/packup_icon.png differ diff --git a/src/assets/unfold_icon.png b/src/assets/unfold_icon.png new file mode 100644 index 0000000..e754e62 Binary files /dev/null and b/src/assets/unfold_icon.png differ diff --git a/src/components/tableComponents/index.vue b/src/components/tableComponents/index.vue index 4dd1944..89d0c0a 100644 --- a/src/components/tableComponents/index.vue +++ b/src/components/tableComponents/index.vue @@ -163,4 +163,36 @@ defineExpose({ :deep(.el-table__row--level-1) { background-color: #f0f0f0; } + +/* 1. 隐藏默认图标 */ +:deep(.el-table__expand-icon) { + /* 若只隐藏图标,保留容器: */ + &::before, + & .el-icon--expand::before { + opacity: 0 !important; /* 透明化,保留点击区域 */ + } + /* 若直接隐藏容器(慎用,会丢失点击区域): */ + /* display: none !important; */ +} + +:deep(.el-table td.el-table__cell div) { + .el-icon { + opacity: 0 !important; + } +} + +/* 2. 自定义折叠状态图标(示例:文件夹图标) */ +:deep(.el-table__expand-icon) { + background: url('../../assets/packup_icon.png') no-repeat center; + background-size: 100% 100%; /* 图标大小 */ + cursor: pointer; +} + +/* 3. 自定义展开状态图标(示例:打开的文件夹) */ +:deep(.el-table__expand-icon--expanded) { + background: url('../../assets/unfold_icon.png') no-repeat center; + background-size: 100% 100%; /* 图标大小 */ + transform: rotate(90deg); + rotate: 90deg; +}