iview中tree的自定义样式高亮当前点击项问题

iview的tree功能真的很简陋，提供的API又很少。 如在树的文字边上增加图标的API也没有，只能自己自定义了。自定义后 selected的样式就丢失了，包括api中的选中事件也失效了,需要自己加上。参考了下网上的做法，一般都是自己写一个单击事件，并加上样式。

1.Tree标签上增加render属性

在Tree标签上 增加render属性,使用的是renderContent()方法

 

<Tree :ref="tree" :data="treeData" :render="renderContent"></Tree>

2.编写renderContent()方法

• 基础模型

先在renderContent方法中按照iview中的文档进行cv，这一步已经完成了给树加图标。但是是没有样式，没有选择的效果也没有鼠标放在上面的效果。

 

    renderContent(h, { root, node, data }) {
                    return h('span', {
                       style: {
                                    display: 'inline-block',
                                    width: '100%'
                                }
                    }, [
                        h('span', [
                                 h('Icon', {
                                        props: {
                                            type: 'ios-folder-outline'
                                        },
                                        style: {
                                            marginRight: '8px'
                                        }
                                    }),
                            h('span', {
                            }, data.title)
                        ]),

                    ]
                    )
            },

• 增加点击样式效果

通过增加class类，先加上ivu-tree-title样式，这样就有了鼠标放在树的节点上的效果。然后在点击事件中为点击项加上ivu-tree-title-selected样式 。

 

                     h('span', {
                             class: ['ivu-tree-title'],
                             on: {
                                 click: (e) => {
                                     let selected = this.$refs.tree.$el.querySelectorAll('.ivu-tree-title-selected')
                                     for (let i = 0; i < selected.length; i++) {
                                         selected[i].className = "ivu-tree-title";
                                     }
                                     e.path[0].className = "ivu-tree-title  ivu-tree-title-selected";//当前点击的元素

                                 }
                             }

                         }, data.title)

• 展开和收缩时样式丢失问题

基本效果已经完成，但是如果你一收缩这棵树的话发现选择的效果消失。这是因为展开的时候会重新去绘画这棵树，所以导致点击事件的样式就丢失了。因为tree都有selected字段，所以利用这个字段来判断是否在重绘的时候就加上ivu-tree-title-selected样式。 但是要保证唯一性要清掉上次选中的结果，这边不确定getSelectedNodes 这个方法是否还可以使用，如果可以的话，应该可以通过这个方法获取节点然后重置，目前就通过将tree的data整个selected进行重置。重置的方法的话，并不太喜欢递归，然后网上找了一个通过栈来存放数据来完成遍历的方式。

 

               //重置selected 
                traverseTree2(node){
                    if (!node) {
                      return;
                    }
                    var stack = [];
                    stack.push(node);
                    var tmpNode;
                    while (stack.length > 0) {
                        tmpNode = stack.pop();
                        tmpNode.selected=false;
                        if (tmpNode.children && tmpNode.children.length > 0) {
                        
                            var i = tmpNode.children.length - 1;
                            for (i = tmpNode.children.length - 1; i >= 0; i--) {
                                tmpNode.children[i].selected=false;
                                stack.push(tmpNode.children[i]);
                            }
                        }
                    }
                },
                renderContent(h, { root, node, data }) {
                    var checkClass = ["ivu-tree-title"];
                    if (data.selected) {
                        checkClass.push("ivu-tree-title-selected");
                    }
                    return h('span', {
                        style: {
                            display: 'inline-block',
                            width: '100%'
                        }
                    }, [
                        h('span', [
                            h('Icon', {
                                props: {
                                    type: 'ios-folder-outline'
                                },
                                style: {
                                    marginRight: '8px'
                                }
                            }),
                            h('span',

                                {
                                    class: checkClass,
                                    on: {
                                        click: (e) => {
                                            this.traverseTree2(this.treeData[0]) ;//同事小弟将整棵树封装成了数组而不是对象所以就取了数组第一个   

                                            let selected = this.$refs.tree.$el.querySelectorAll('.ivu-tree-title-selected')
                                            for (let i = 0; i < selected.length; i++) {
                                                selected[i].className = "ivu-tree-title";
                                            }
                                            e.path[0].className = "ivu-tree-title  ivu-tree-title-selected";//当前点击的元素
                                            data.selected = true;

                                        }
                                    }
                                }, data.title)
                        ]),

                    ]
                    )
                },

最后补充
大部分的tree的操作都可以通过数据模型的修改来反应到页面上，对于vue.js的双向绑定还是很好用的，减轻了很多获取元素的工作。
这边也是参考了别人怎么处理这个问题，然后得出自己的解决方案。
参考:
iView 用renderContent自定义树组件
iview 中tree组件使用render自定义内容树显示问题

作者：y丶M1ng
链接：https://www.jianshu.com/p/b6cd05ad2d1a
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。