Element ui 中的tree 在数据前面添加自定义图标

可以使用 el-tree 标签实现 在节点区添加按钮或图标等内容

也可以通过class来自定义图标

<template>
  <div class="my-tree-main">
    <el-tree
      :data="treeData"
      :props="defaultProps"
      :render-content="renderContent"
      :highlight-current="showTree" <!-- highlight-current 高亮显示 不让背景消失  如果想取消选中也可以在某个事件上为false就可以随着点击事件取消高亮 -->
    >
    </el-tree>
  </div>
</template>

<script>
export default {
  name: "MyTree",
  data() {
    return {
      showTree: true,
      treeData: [
        {
          id: "1",
          name: "schoolDb",
          type: "category",
          children: [
            { id: "1-1", name: "user_t", type: "rain" },
            { id: "1-2", name: "class_t", type: "rain" },
            { id: "1-3", name: "grade_t", type: "rain" },
          ],
        },
      ],
      defaultProps: {
        //el-tree 树结构默认渲染的字段
        children: "children",
        label: "name",
        isLeaf:'isLeaf' //isLeaf在tree组件里面算是判断有没有子集 相当于可以控制三角显示▶️
      },


      //   这个函数要的是要返回一个dom结构,具体为啥应该是和组件有关系
      //   传参第一个应该是一个dom节点，后面会用到，但是我不知道为什么不直接取而是再去取自身的，可能会有好处吧
      // 第二个就是ES6的结构写法
      renderContent: function (h, { node, data, store }) {
        /**
            这个addElement等于的是一个自身的索引为0的东西
            我也不晓得这是个啥回来console看看吧
            大概率是一个dom结构或者是新增dom的东西
        */
        let addElement = arguments[0];
        // 这里判断这个rain类型，是和上面 children 有关系
        /*
            反正在最后返回了一个dom元素，一个i标签和俩span标签
            i标签添加个类名是放置icon图标，后面空span不知道干嘛的
            最后一个span是吧你要填写的文字传进去，他拿的是自身的索引为1的里面的
            我懂了，这个索引应该就是参数，这里拿到的是第二个参数中的数据
         */
        if (data.type === "rain") {
            return addElement("span", [
              addElement("i", { class: "el-icon-picture" }), //可以自定义图标 el-icon-picture为element组件里自带的icon图标
              addElement("span", "    "),//这个大家可加可不加 css也可以实现
              addElement("span", arguments[1].node.label),
            ]);
        } else {
          return addElement("span", [
            addElement("i", { class: "icon" }), // icon为类名自定义的图标
            addElement("span", "    "),
            addElement("span", arguments[1].node.label),
          ]);
        }
      },
    };
  },
};
</script>

<style scoped>
.icon {
  width:10px;
  height:10px;
  background:url('../img/icon.jpg');
  background-size:100% 100%;
}
</style>