【Vue】elementui tree自定义节点图标

Z时代
2024-01-10
分类：技术分享

通过css只能定义两级节点图标如下图
【Vue】elementui tree自定义节点图标

修改方式

希望能实现不同节点显示不同图标的目的，求指导

回答

<template>
    <el-tree
        :data="treeData"
        :expand-on-click-node="true"
        class="project-tree"
        unselectable="on"
        :render-content="renderContent"
    >
</template>
<script>
export default{
    methods: {
        renderContent(h, { node, data, store }) {
            return (
              <span class="custom-tree-node">
                <i class={data.className}></i>
                <span style="margin-left:5px;">{node.label}</span>
              </span>
              );
          }
  }
}
<script>
<style>
i{
    display:inline-block;
    background:url("...")
}</style>

data:

"treeData": [
      {
      "id": 1,
      "label": "haha",
      "className": "first-level",
      "children": [
          {
          "id": 11,
          "label": "hehe",
          "className": "second-level",
          "children": [
                  {
                      "id": 111,
                      "className": "third-level",
                      "label": "heihei"
                  }
              ]
          }
        ]
     } ]