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

怼烎@ 2023-01-11 14:29 250阅读 0赞

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

### 1.Tree标签上增加render属性 ###

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

### 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 _renderContent]  
[iview 中tree组件使用render自定义内容树显示问题][iview _tree_render]

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

[iView _renderContent]: https://links.jianshu.com/go?to=https%3A%2F%2Fwww.cnblogs.com%2FToBeBest%2Fp%2F9606213.html
[iview _tree_render]: https://links.jianshu.com/go?to=https%3A%2F%2Fsegmentfault.com%2Fq%2F1010000013668855