vue3+elementPlus：前端自定义el-tree图标icon-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue3+elementPlus：前端自定义el-tree图标icon。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

重点：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循环

for循环数据，前端自定义tree图标第一种方法，后端key没有icon字段，自己添加

//遍历数据
        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数据
const treeList = (key, resolve) => {
  HeaderList({
    id: key,
    childNodeType: 2324,
  })
    .then((res) => {
        if (res.status === 200) {
        //核心代码

       // //for循环
        //let obj=res.data.data
       // //遍历数据
        //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;
            // 主动调用展开节点方法，重新查询该节点下的所有子节点
            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文章来源地址https://www.toymoban.com/news/detail-617084.html

到了这里，关于vue3+elementPlus：前端自定义el-tree图标icon的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！