The tree component in iview uses render to customize the content tree to display problems

after the tree component in iview uses render custom content, clicking on the tree node no longer displays the background. How to add background color to the currently selected node in render rendering?
1, the default tree component, click

2render

with background.
Mar.04,2021
The authors of

iview have answered similar questions on github. After the tree component uses the render function, it thinks that all the logic and effects need to be written manually. The tree component only provides the simplest data presentation effect. If you want to click on the background, you can register a click event implementation in the render function


.

my method should be more reliable.
html sets ref= "tree"

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

js method

renderContent(h, { root, node, data }){
    return h('span',{
        style:{
            color:'-sharp666',
            cursor:'pointer'
        },
        domProps:{
            className:'btn'
        },
        on:{
            click:(e)=>{
                let btns=this.$refs.tree.$el.querySelectorAll('.btn')
                for(let i=0;i<btns.length;iPP){
                    btns[i].style.backgroundColor='-sharpfff'
                }
                e.path[0].style.backgroundColor="-sharp2d8cf0";//
            }
        }
    },data.title)
}

   

  • In iview, tree cannot change checked to false

    do permission control, and it is possible to select and display the tree table and set checked=true, according to the permissions sent back by the background. If you change the permission setting, the checked=false, will fail, and the checked will still...

    Mar.19,2021
Menu