基于iview的tree节点自定义选中高亮

基于iview的tree节点选中高亮

iview 的树节点本来默认选中就有背景高亮的，但是如果你用了render自定义组件渲染后，默认选中背景高亮就不起作用了。这就需要我们自己在render函数里自己定义了。
我接手公司一个项目，该项目的左侧目录栏使用了iview的tree组件。本来是可以背景高亮的，但是项目大改，数据全变了。开发时间又比较急，树节点背景选中高亮不起作用了。
项目原来代码

renderContent(h, { root, node, data }) {
        return h(
          "span",
          {
            style: {
              display: "inline-block",
              width: "100%",
              height: "45px",
              lineHeight: "45px",
              fontSize: "14px",
              overflow: "hidden",
              textOverflow: "ellipsis",
              whiteSpace: "nowrap",
               //color: !node.node.selected ? "" : "#007AFF", //根据选中状态设置样式
              //backgroundColor: node.node.selected ? "rgba(0, 123, 255,0.09)" : "#fff", // 根据选中状态设置样式
              cursor: "pointer"
            },

项目使用节点数据的selected属性来显示背景高亮，但是现在出问题了，如果树的父节点下的子节点如果有多个子节点，那么点击第一次才有背景高亮。接下来点击其他子节点，背景高亮就不起作用了，我试着打印，发现是render不起作用了，render函数只在点击父节点和第一次点击父节点下的子节点在起作用。至于为什么这样，我无法找到原因，可能要研究一下源码才能知道原因。但项目时间比较紧，没办法我只能回归原始的dom操作了，下面是我的代码：

domProps:{
              className:'tree-btn'
            },
            on: {
              click: (e) => {
                this.treeNodeClick({ root, node, data });
                this.nodeKey = node.nodeKey;
                //给选中的节点加背景，没办法，以前的方法没用了，只能用操作dom节点来了，虽说不优雅
                let btns = document.querySelectorAll('.tree-btn')
                console.log(this.nodeKey)
                console.log(btns)
                for(let i = 0; i < btns.length; i++){
                  btns[i].style.backgroundColor = '#fff'
                }
                if(this.nodeKey >= btns.length) {
                  this.nodeKey = btns.length - 1
                }
                btns[this.nodeKey].style.backgroundColor = "rgba(0, 123, 255,0.09)";//当前点击的元素
              }
            }

我直接给所有节点定义一个class，然后用class绑定样式，这样问题就基本解决了虽说还是有问题，但是勉强可以接受了。至于问题，等我有空再来解决吧。