vue3+elementPlus:前端自定义el-tree图标icon

本文介绍如何在前端项目中利用El-tree组件结合SVG图标实现自定义树形结构图标的方法,包括使用for循环和map遍历两种方式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

重点: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报错_意初的博客-优快云博客运行项目浏览器:Uncaught (in promise) TypeError: resolve is not a function报错。https://blog.youkuaiyun.com/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

### 如何在 Element UI 的 `el-tree` 组件中自定义图标 要在 Element UI 的 `el-tree` 中实现自定义图标的功能,可以按照以下方法操作: #### 安装必要的依赖 为了支持 JSX 语法(用于更灵活的渲染),需要安装一些 Babel 插件来转换 Vue JSX 代码。可以通过运行以下命令完成安装[^1]: ```bash npm install babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props babel-preset-env --save-dev ``` #### 配置 `.babelrc` 文件 在项目的根目录下找到或创建 `.babelrc` 文件,并添加以下配置项以启用 JSX 支持: ```json { "presets": ["env"], "plugins": [ "syntax-jsx", "transform-vue-jsx" ] } ``` #### 使用 `render-content` 方法来自定义节点内容 通过设置 `el-tree` 的 `render-content` 属性,可以在树节点上显示自定义的内容,包括图标和其他 HTML 元素。 下面是一个完整的示例代码片段,展示如何为每个节点添加不同的图标: ```vue <template> <div> <el-tree :data="treeData" node-key="id" default-expand-all> <!-- render-content 自定义节点 --> <span class="custom-node" slot-scope="{ node, data }"> <i v-if="data.type === &#39;folder&#39;" class="el-icon-folder-opened"></i> <!-- 折叠文件夹图标 --> <i v-else-if="data.type === &#39;file&#39;" class="el-icon-document"></i> <!-- 文档文件图标 --> {{ data.label }} </span> </el-tree> </div> </template> <script> export default { data() { return { treeData: [ { id: 1, label: "父级节点", type: "folder", children: [{ id: 2, label: "子节点", type: "file" }] }, { id: 3, label: "另一个父级节点", type: "folder" } ] }; } }; </script> <style scoped> .custom-node i { margin-right: 8px; } </style> ``` 上述代码展示了如何基于数据中的字段动态切换不同类型的图标。如果某个节点的数据对象具有属性 `type` 值为 `"folder"` 或 `"file"`,则会分别应用对应的图标类名 `el-icon-folder-opened` 和 `el-icon-document`。 --- #### 注意事项 1. **图标的样式** 图标来源于 Element UI 提供的一系列默认字体图标集合。更多可用图标可查阅官方文档。 2. **性能优化** 如果树结构非常复杂或者有大量节点时,建议谨慎使用复杂的渲染逻辑以免影响页面加载速度。 3. **兼容性测试** 确保项目环境已正确配置好 Babel 插件并能正常解析 JSX 结构后再尝试此功能。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值