重點：template蒙版下svg和use，然后前端遍歷添加key和value，取判斷放圖標

HTML結構：el-tree里面包裹template（關鍵點）

<el-tree
:data="treeData"
....
>
//關鍵步驟
<template #default="{ node, data }">
          <span class="custom-tree-node">
                  <svg class="icon svg-icon" aria-hidden="false">
                    <use :xlink:href="`#` + data.icon"></use>
                  </svg>
            <span>
              {{ data.name }}
            </span>
          </span>
        </template>

</el-tree>

方法一：使用for循環(huán)

for循環(huán)數(shù)據(jù)，前端自定義tree圖標第一種方法，后端key沒有icon字段，自己添加

//遍歷數(shù)據(jù)
        for(const key in obj){
          // console.log(obj[key]);
          //前端自定義tree圖標第一種方法
          if (obj[key].nodeType===1) {
             //后端key沒有icon字段，自己添加
            obj[key].icon="icon-chang"
          }else if(obj[key].nodeType===22){
            obj[key].icon="icon-peizhi"
          }else if(obj[key].nodeType===234){
            obj[key].icon="icon-jiance"
          }         

方法二： 使用map遍歷

直接map遍歷前端自定義tree圖標

res.data.data.map((v) => {
            //第二種方法
             //前端自定義tree圖標
            if (v.nodeType == 1) {
              v.icon = "icon-chang";
            } else if (v.nodeType == 22) {
              v.icon = "icon-peizhi";
            } else if (v.nodeType == 234) {
              v.icon = "icon-jiance";
            }

完整代碼:

//html
<el-tree
        v-model="filterText"
        :load="loadNode"
        lazy
        ref="deptTreeRef"
        :data="datalist.tree"
        node-key="id"
        :props="{ label: 'name', isLeaf: 'leaf' }"
        highlight-current
        :expand-on-click-node="false"
        :filter-node-method="filterNode"
        @node-click="handleNodeClick"
      >
        <template #default="{ node, data }">
          <span class="custom-tree-node">
                  <svg class="icon svg-icon" aria-hidden="false">
                    <use :xlink:href="`#` + data.icon"></use>
                  </svg>
            <span>
              {{ data.name }}
            </span>
          </span>
        </template>
      </el-tree>
      
//js
//獲取tree數(shù)據(jù)
const treeList = (key, resolve) => {
  HeaderList({
    id: key,
    childNodeType: 2324,
  })
    .then((res) => {
        if (res.status === 200) {
        //核心代碼

       // //for循環(huán)
        //let obj=res.data.data
       // //遍歷數(shù)據(jù)
        //for(const key in obj){
        //  //前端自定義tree圖標第一種方法
          //if (obj[key].nodeType===1) {
            // //后端key沒有icon字段，自己添加
            //obj[key].icon="icon-chang"
          //}else if(obj[key].nodeType===22){
            //obj[key].icon="icon-peizhi"
          //}else if(obj[key].nodeType===234){
            //obj[key].icon="icon-jiance"
          //}         
          
        //}
        return resolve(
          res.data.data.map((v) => {
            //第二種方法
             //前端自定義tree圖標
            if (v.nodeType == 1) {
              v.icon = "icon-chang";
            } else if (v.nodeType == 22) {
              v.icon = "icon-peizhi";
            } else if (v.nodeType == 234) {
              v.icon = "icon-jiance";
            }
            // console.log(v.nodeType);
            TreeNode.value.loaded = false;
            // 主動調用展開節(jié)點方法，重新查詢該節(jié)點下的所有子節(jié)點
            TreeNode.value.expand();
            return { ...v, leaf: !v.hasChildren};
          })
        );
      }
    })
    .catch(() => {
      return Promise.resolve([]);
    });
};

//css
.icon {
      width: 20px;
      height: 20px;
      font-size: 20px;
      //margin-right: 10px;
      //margin-left: 4px;
      vertical-align: -0.15em;
      fill: currentColor;
      overflow: hidden;
    }

作者上一篇文章，

解決前端項目問題：Uncaught (in promise) TypeError: resolve is not a function報錯_意初的博客-CSDN博客運行項目瀏覽器：Uncaught (in promise) TypeError: resolve is not a function報錯。https://blog.csdn.net/weixin_43928112/article/details/127005043?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22127005043%22%2C%22source%22%3A%22weixin_43928112%22%7D文章來源地址http://www.zghlxwxcb.cn/news/detail-617084.html

到了這里，關于vue3+elementPlus：前端自定義el-tree圖標icon的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！