【组件推荐&改造】基于element-ui 实现的iview风格tree组件

       由于iview的tree组件API比较少，加上项目的需要iview的tree组件并不能完全的实现我想要的效果，于是就在网上找了一圈，发现了某位大佬改造的tree组件（https://www.npmjs.com/package/chu-tree-iview）。

        这个组件将element ui的tree组件改造成iview风格的，当时使用的时候是基于element ui 2.2.2版本的，所以后面新增的API也没有了，不过目前看来也够用了。

在此基础上，我调整和优化了一些细节：

1. 修改原来的箭头样式，估计使用的是旧版的iview样式，所以我在使用的时候箭头图标已经无法显示了；
2. 树节点可以设置图标，两种图标，父节点和叶子节点，默认使用了我从iconfont上面找的图标，可以自定义设置；

新增的设置如下：

 // 父节点的图标
 parentIcon: {
     type: String,
     default: ' iconfont icon-folder'
 },
 // 叶子节点的图标
 leafIcon: {
     type: String,
     default: ' iconfont icon-page'
 },
 // 是否显示图标
 showIcon: {
    type: Boolean,
    default: false
 },
 // 图标的大小 
 iconSize: {
    type: Number,
    default: 13
 },
 // 点击节点设置选中，用于有复选框，且不高亮选中当前节点
 checkOnClickNode: {
    type: Boolean,
    default: false
 }

 

效果图：

npm地址：https://www.npmjs.com/package/chu-tree-iview-chg

API除了我上面列出的以外其他参照element的组件API：https://element.eleme.cn/2.2/#/zh-CN/component/tree