iview 中tree组件使用render自定义内容树显示问题

Question

iview 中tree组件使用render自定义内容后，点击树节点不再显示背景。如何在render渲染中加入当前选中节点有背景色?
1，默认tree组件，单击有背景

2，使用render后选中的节点不再有背景

Answer 1

iview的作者在github上面有回答了类似的问题，tree组件使用了render函数之后，以为着所有的逻辑及效果都需要自己手动写，tree组件仅仅提供最简单的数据展示效果，你要点击有背景的话可以在render函数里面注册一个click事件实现即可

Answer 2

我这个方法应该比较靠谱吧。
html设置ref="tree"

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

js方法

renderContent(h, { root, node, data }){
    return h('span',{
        style:{
            color:'#666',
            cursor:'pointer'
        },
        domProps:{
            className:'btn'
        },
        on:{
            click:(e)=>{
                let btns=this.$refs.tree.$el.querySelectorAll('.btn')
                for(let i=0;i<btns.length;i++){
                    btns[i].style.backgroundColor='#fff'
                }
                e.path[0].style.backgroundColor="#2d8cf0";//当前点击的元素
            }
        }
    },data.title)
}

Answer 3

return h(
        "span",
        {
          style: {
            display: "inline-block",
            cursor: "pointer",
            color: node.node.selected ? "#2d8cf0" : "#fff" //根据选中状态设置样式
          },
          on: {
            click: () => {
              if (!node.node.selected)
                this.$refs.tree.handleSelect(node.nodeKey); //手动选择树节点
            }
          }
        }

组件上挂ref即可

Answer 4

求楼主分享最后解决方案...

Answer 5

同求解决方案~

Answer 6

用了render这个方法selected属性因为权重问题不起作用，我把节点变成一个button可以点击，改一下button的样式，问题就解决了，满意的话赞赏下呗，不懂的话，私聊

Answer 7

简单。把节点title放在button显示

h('span', data.title)

改成

            h('Button', {
              props: Object.assign({}, this.buttonProps, {
                type: 'text'
              }),
              on: {
                click: () => { console.log('点击按键') }
              }
            },
            data.title)
          ]),

Answer 8

请问楼主编辑（修改）功能怎么做