基于iview的tree节点⾃定义选中⾼亮
基于iview的tree节点选中⾼亮
iview 的树节点本来默认选中就有背景⾼亮的，但是如果你⽤了render⾃定义组件渲染后，默认选中背景⾼亮就不起作⽤了。这就需要我们⾃⼰在render函数⾥⾃⼰定义了。
我接⼿公司⼀个项⽬，该项⽬的左侧⽬录栏使⽤了iview的tree组件。本来是可以背景⾼亮的，但是项⽬⼤改，数据全变了。开发时间⼜⽐较急，树节点背景选中⾼亮不起作⽤了。
项⽬原来代码
nodeselectorrenderContent(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: !de.selected ? "" : "#007AFF", //根据选中状态设置样式
//backgroundColor: de.selected ? "rgba(0, 123, 255,0.09)" : "#fff", // 根据选中状态设置样式
cursor:"pointer"
},
项⽬使⽤节点数据的selected属性来显⽰背景⾼亮，但是现在出问题了，如果树的⽗节点下的⼦节点如果有多个⼦节点，那么点击第⼀次才有背景⾼亮。接下来点击其他⼦节点，背景⾼亮就不起作⽤了，我试着打印，发现是render不起作⽤了，render函数只在点击⽗节点和第⼀次点击⽗节点下的⼦节点在起作⽤。⾄于为什么这样，我⽆法到原因，可能要研究⼀下源码才能知道原因。但项⽬时间⽐较紧，没办法我只能回归原始的dom操作了，下⾯是我的代码：
domProps:{
className:'tree-btn'
},
on:{
click:(e)=>{
//给选中的节点加背景，没办法，以前的⽅法没⽤了，只能⽤操作dom节点来了，虽说不优雅
let btns = document.querySelectorAll('.tree-btn')
console.deKey)
console.log(btns)
for(let i =0; i < btns.length; i++){
btns[i].style.backgroundColor ='#fff'
}
deKey >= btns.length){
}
deKey].style.backgroundColor ="rgba(0, 123, 255,0.09)";//当前点击的元素
}
}
我直接给所有节点定义⼀个class，然后⽤class绑定样式，这样问题就基本解决了虽说还是有问题，但是勉强可以接受了。⾄于问题，等我有空再来解决吧。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。