【組件推薦&改造】基於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