elementPlus-tree 自定义展开，收起图标

<template><div><el-tree:data="treeData"default-expand-allhighlight-current:expand-on-click-node="false"><template #default="{ node, data }"><span><!-- =================  关键代码1-start  =================--><span @click="toggleChild(node)"><!-- 没有子级所展示的图标 --><i v-if="!data.children" class=""></i><!-- 展开后的图标 --><i v-else-if="node.expanded" class="el-icon-minus"><el-icon><FolderAdd /></el-icon></i><!-- 未展开的图标 --><i v-else class="el-icon-plus"><el-icon><FolderRemove /></el-icon></i></span><!-- =================  关键代码1-end  =================--><span class="custom-tree-node">{{ node.label }}</span></span></template></el-tree></div>
</template><script setup lang="ts">
import { reactive, getCurrentInstance, ref } from "vue";const treeData = reactive([{id: 1,label: "设备类型 1",children: [{id: 4,label: "产品名称 1-1",children: [{id: 9,label: "产品名称 1-1",},],},],},{id: 2,label: "设备类型 2",children: [{id: 5,label: "产品名称 2-1",},{id: 6,label: "产品名称 2-2",},],},{id: 3,label: "设备类型 3",children: [{id: 7,label: "产品名称 3-1",},{id: 8,label: "产品名称 3-2",},],},
]);
<!-- =================  关键代码3-start  =================-->
const toggleChild = (node) => {node.expanded = !node.expanded;
};
<!-- =================  关键代码3-end  =================-->
</script><style scoped lang="scss">
:deep(.el-tree) {padding-left: 20px;
}:deep(.custom-tree-node) {padding: 0 10px 0 8px;
}
<!-- =================  关键代码2-start  =================-->
// 自定义图标中隐藏自带箭头
:deep(.el-tree-node__content) {position: relative;
}:deep(.el-tree-node__content > .el-tree-node__expand-icon) {position: absolute;opacity: 0;
}
<!-- =================  关键代码2-end  =================-->
</style>

链接: 参考1，参考2