【vue3】实现el-tree组件，将不同层级的箭头修改成自定义图标

 效果图

<template>
  <div class="menu">
    <div class="menu_list">
      <el-tree
        ref="myTree"
        :highlight-current="true"
        :current-node-key="person.treeCheckedData"
        node-key="Id"
        :default-expanded-keys="person.treeExpandData"
        :expand-on-click-node="false"
        accordion
        :data="person.treeData"
        :props="{ class: customNodeClass }"
        @node-click="onNodeClick"
      >
        <template #default="{ node, data }">
          <div class="tree_title">{{ node.label }}{{ data.id }}</div>
        </template>
      </el-tree>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue';
const person = reactive({
  treeData: [
    {
      id: 1,
      label: '知识点1',
      isPenultimate: true,
      children: [
        {
          id: 11,
          label: '规则校验',
          children: [
            {
              id: 111,
              label: '字段',
            },
          ],
        },
      ],
    },
    {
      id: 2,
      label: '知识点2',
      isPenultimate: true,
      children: [
        {
          id: 22,
          label: 'Level two 2-1',
          children: [
            {
              id: 222,
              label: 'Level three 2-1-1',
            },
          ],
        },
        {
          id: 23,
          label: 'Level two 2-2',
          children: [
            {
              id: 232,
              label: 'Level three 2-2-1',
            },
          ],
        },
      ],
    },
    {
      id: 3,
      label: '知识点',
      isPenultimate: true,
      children: [
        {
          id: 33,
          label: 'Level two 3-1',
          children: [
            {
              id: 333,
              label: 'Level three 3-1-1',
            },
          ],
        },
        {
          id: 34,
          label: 'Level two 3-2',
          children: [
            {
              id: 343,
              label: 'Level three 3-2-1',
            },
          ],
        },
      ],
    },
  ],
  treeExpandData: [], // 默认展开项
  treeCheckedData: 0, // 默认选中项
});

onMounted(() => {
  load();
});
// 初始化
const myTree = ref();
const load = () => { console.log('')};

// 节点单击事件
const onNodeClick = () => {
  console.log('');
};
// 默认选中项样式
const customNodeClass = (data: any, node: Node) => {
  if (data.isPenultimate) {
    return 'is-penultimate';
  }
  return null;
};
</script>
<style lang="scss" scoped>
.menu {
  .menu_list {
    :deep(.el-tree-node__content) {
      height: inherit;
      padding: 5px 0;
      align-items: center;
      &:hover {
        background-color: transparent;
        color: #2080f7;
      }
      .tree_title {
        margin-left: 5px;
        width: 90%;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        overflow: hidden;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
      }
      // 设置本身箭头为隐藏状态
      .el-tree-node__expand-icon {
        width: 20px;
        padding: 0;
        margin: 5px 0;
        svg {
          display: none;
          width: 0;
        }
      }
      // 禁止图标旋转
      .el-tree-node__expand-icon.expanded {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }
    }
    :deep(.is-penultimate > .el-tree-node__content) {
      font-weight: bold;
    }
    // 自定义节点高亮样式
    :deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
      background-color: transparent;
      color: #2080f7;
    }
    // 文字选中状态
    :deep(.el-tree-node:focus) {
      > .el-tree-node__content {
        background-color: transparent;
        color: #2080f7;
      }
    }
    // 第一层
    :deep(.el-tree-node) {
      white-space: inherit;
      // 关闭状态
      .el-tree-node__expand-icon::before {
        background: url('@/assets/images/pageImg/01.png') no-repeat;
        content: '';
        display: block;
        width: 18px;
        height: 18px;
        background-size: 100% 100%;
      }
      // 展开状态
      .el-tree-node__expand-icon.expanded::before {
        background: url('@/assets/images/pageImg/02.png') no-repeat;
        content: '';
        display: block;
        width: 18px;
        height: 18px;
        background-size: 100% 100%;
      }
      // 没有子节点
      .el-tree-node__expand-icon.is-leaf::before {
        background: url('@/assets/images/pageImg/03.png') no-repeat;
        content: '';
        display: block;
        width: 18px;
        height: 18px;
        background-size: 100% 100%;
      }
      // 第二层
      & > .el-tree-node__children {
        // 关闭状态
        .el-tree-node__expand-icon::before {
          background: url('@/assets/images/pageImg/04.png') no-repeat;
          content: '';
          display: block;
          width: 16px;
          height: 16px;
          background-size: 100% 100%;
        }
        // 展开状态
        .el-tree-node__expand-icon.expanded::before {
          background: url('@/assets/images/pageImg/04.png') no-repeat;
          content: '';
          display: block;
          width: 16px;
          height: 16px;
          background-size: 100% 100%;
        }
        // 没有子节点
        .el-tree-node__expand-icon.is-leaf::before {
          background: url('@/assets/images/pageImg/05.png') no-repeat;
          content: '';
          display: block;
          width: 16px;
          height: 16px;
          background-size: 100% 100%;
        }
      }
      // 第三层
      // & > .el-tree-node > .el-tree-node__children {
      //   // 关闭状态
      //   .el-tree-node__expand-icon::before {
      //     background: url('../../../assets/img/new/jia_yuan.png') no-repeat;
      //     content: '';
      //     display: block;
      //     width: 16px;
      //     height: 16px;
      //     background-size: 100% 100%;
      //   }
      //   // 展开状态
      //   .el-tree-node__expand-icon.expanded::before {
      //     background: url('../../../assets/img/new/jian_yuan.png') no-repeat;
      //     content: '';
      //     display: block;
      //     width: 16px;
      //     height: 16px;
      //     background-size: 100% 100%;
      //   }
      //   // 没有子节点
      //   .el-tree-node__expand-icon.is-leaf::before {
      //     background: url('../../../assets/img/new/jian_yuan.png') no-repeat;
      //     content: '';
      //     display: block;
      //     width: 16px;
      //     height: 16px;
      //     background-size: 100% 100%;
      //   }
      // }
    }
  }
}
</style>

原文地址：https://blog.csdn.net/weixin_42498594/article/details/142883466

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！