el-tree自定义图片问题

项目场景：

     使用element-ui 的树状图el-tree在节点前面显示图片并且图片大小自定义设置。
     效果：
三层数据，第一层一个图片，第二层一个图片，第三层跟第二层一个图片
如果这三层默认没有图片的话，引用文件夹图标和file图标
效果如下：

---

代码：

1.数据结构：

<script>
export default {
  data() {
    return {
     list: [
        {
          label: "关系型1",
          value: "",
          children: [
            {
              label: "mysql",
              value: "xxxx",
              children: [
                {
                  label: "1.X",
                  value: "",
                  data: {
                    name: "mysql",
                  },
                },
              ],
            },
          ],
        },
        {
          label: "关系型2",
          value: "",
          children: [
            {
              label: "mysql",
              value: "xxxx",
              children: [],
            },
          ],
        },
      ],
    };
  },
};
</script>

2.判断条件：

<template>
    <div>
      <el-tree
        :data="deptOptions"
        :props="props"
        node-key="id"
        :default-expanded-keys="defaultExpandedKeys"
        @node-click="handleNodeClick"
        :filter-node-method="filterNode"
        :current-node-key="highlightKey"
        highlight-current
        accordion
        ref="testTree"
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>
            <!-- 如果在自己设置的图片库里就显示自己的 -->
              <img
                v-if="arr(data.label) != undefined"
                style="float: left"
                :class="getCssVal(data.label) ? 'parentCss' : 'noParentCss'"
                :src="arr(data.label)"
              />
              <!-- 这个是第三层的 -->
              <img
                v-else-if="data.data != undefined"
                style="height: 20px; float: left"
                :src="arr(data.data.name)"
              />
              <!-- 这些是没有图片用自定义图标的 -->
              <i
                v-else-if="
                  Array.isArray(data.children) && data.children.length > 0
                "
                style="margin-right: 10px"
                class="el-icon-folder"
              ></i>
              <i v-else style="margin-right: 10px" class="el-icon-tickets"></i>
              {{ node.label }}
            </span>
        </span>
      </el-tree>
    </div>
</template>

3.图片显示/高度显示代码：

<template>
 <div :class="getCssVal(data.label) ? 'parentCss' : 'noParentCss'">
 </div>
</tempalte>
<script>
export default {
	methods: {
    /* 图标显示 */
    arr(row) {
    // 图片路径引用
      const images = {
        关系: require("图片路径"),
        mysql: require("图片路径"),
      };
      return images[row] || null;
    },
    // 控制节点图片大小 最外面的节点图片大小为15px，里面的节点图片大小为25px
    getCssVal(row) {
    //判断 这个节点是不是最外面那层
      const isSpecialCategory = [
        "关系型",
      ].includes(row);
      return isSpecialCategory;
    },
  },
};
</script>
 <style lang="scss">
.parentCss {
  height: 15px;
  margin:0 5px;
}
.noParentCss {
  height: 25px;
}
</style>

4.全部代码：

<template>
    <div>
      <el-tree
        :data="deptOptions"
        :props="props"
        node-key="id"
        :default-expanded-keys="defaultExpandedKeys"
        @node-click="handleNodeClick"
        :filter-node-method="filterNode"
        :current-node-key="highlightKey"
        highlight-current
        accordion
        ref="testTree"
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>
              <img
                v-if="arr(data.label) != undefined"
                style="float: left"
                :class="getCssVal(data.label) ? 'parentCss' : 'noParentCss'"
                :src="arr(data.label)"
              />
              <img
                v-else-if="data.data != undefined"
                style="height: 20px; float: left"
                :src="arr(data.data.name)"
              />
              <i
                v-else-if="
                  Array.isArray(data.children) && data.children.length > 0
                "
                style="margin-right: 10px"
                class="el-icon-folder"
              ></i>
              <i v-else style="margin-right: 10px" class="el-icon-tickets"></i>
              {{ node.label }}
            </span>
        </span>
      </el-tree>
    </div>
</template>

<script>
export default {
  props: {
    /* 树形图data */
    deptOptions: {
      type: Array,
      default: [],
    },
    /* 默认展开节点的值 */
    defaultExpandedKeys: {
      type: Array,
    },
    /* tree型子级的格式 */
    props: {
      type: Object,
    },
    /* 默认高亮 */
    highlightKey: {
      type: [String, Number],
      default: "",
    },
  },
  data() {
    return {
    };
  },
  methods: {
    /* 图标显示 */
    arr(row) {
      const images = {
        关系型: require("路径"),
      };
      return images[row] || null;
    },
    getCssVal(row) {
      const isSpecialCategory = [
        "关系"
      ].includes(row);
      return isSpecialCategory;
    },
  },
};
</script>
 <style lang="scss">
.parentCss {
  height: 15px;
  margin:0 5px;
}
.noParentCss {
  height: 25px;
}
</style>