使用 el-tree 标签实现 在节点区添加图标

使用 el-tree 标签实现 在节点区添加按钮或图标等内容，如下所示，添加了以sunny和rain的图标

<template>
    <div class="my-tree-main">
        <el-tree ref="myTree" :data="treeData"
                 :props="defaultProps"
                 :render-content="renderContent">

        </el-tree>
    </div>
</template>

<script>
    export default {
        name: "MyTree",
        data(){
            return{
                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"
                },
                renderContent:function (h,{node,data,store}) {
                    let addElement = arguments[0];
                    if(data.type === 'rain'){
                        return addElement('span',[
                            addElement('i',{class:"el-icon-heavy-rain"}),
                            addElement('span',"    "),
                            addElement('span',arguments[1].node.label)
                        ]);
                    }else{
                        return addElement('span',[
                            addElement('i',{class:"el-icon-sunny"}),
                            addElement('span',"    "),
                            addElement('span',arguments[1].node.label)
                        ]);
                    }
                }

            }
        }
    }
</script>

<style scoped>

</style>

其他说明：renderContent函数中，可以直接返回编写的html元素标签，如下代码所示（下面代码和上面代码无任何关联）。

 renderContent(h, { node, data, store }) {
        return (
          <span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
            <span>
              <span>{node.label}</span>
            </span>
            <span>
              <el-button style="font-size: 12px;" type="text" on-click={ () => this.append(data) }>Append</el-button>
              <el-button style="font-size: 12px;" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button>
            </span>
          </span>);
      }