基于iview的Tree控件自定义节点内容

在本篇文章当中，将采用vue+iview的tree组件实现树型结构。

实现效果图

要实现这种自定义效果其实不难，而且官网有相应的实例代码，如下所示：

可以从官网的示例代码中发现，如果要自定义树型控件内容的话，需要采用render函数，该Render函数的第二个参数包含三个字段，分别为根节点、当前节点、当前节点的数据。
在data数据里面的render设置的自定义根节点，而通过bind绑定的render则是用来自定义子节点的，而文章开头展示的效果图当中，要实现的效果根节点和子节点的样式是一样的，所以在这可以共用一个render函数。

            //公共的render函数
            renderContent (h, { root, node, data }) {
                return h('span', {
                    style: {
                        display: 'inline-block',
                        width: '100%'
                    }
                }, [
                    h('span', [
                        h('img', {
                            attrs:{
                                src:data.src //图片的地址
                            },
                            style: {
                                verticalAlign: "middle",
                                display:"inline-block",
                                margin:'0px 5px'
                            }
                        }),
                        h('span', data.subprojectName) //subprojectName属性存放的是需要显示的文本信息
                    ])
                ]);
            }

从代码中可以看出，这个公共的render也就是实现了图片后面跟上文本信息，图片的src存放在数据当中的src属性中，文本信息存放在subprojectName属性中。
在iview的官方示例当中，还存在着可以勾选多选以及子菜单延迟加载的功能，延迟加载也就是去请求API将数据返回了，具体的都可以直接参考官方示例。