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

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

<template>
  <div>
    <el-tree
      :data="treeData"
      default-expand-all
      highlight-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