问题描述

项目中使用到了elementUI中的tree组件，子级需要点击之后有active效果，但是父级不需要。遂，开刨

1、看了，试了很多次API，但是解决不了。放弃

2、直接修改class无果，放弃

3、。。。。

解决方案

1、请求接口之后

ajax().then(res=>{
	//把数据组装成组件所需，并加入自己想要的k-v
    const {data} = res
    const tempData = data.filter(item => item.data.length > 0)
	this.dataList = tempData.map(item=>{
    	return {
        	label:item.name,
            	children:item.data.map(val=>{
            	label:val.name,
                info:val,
                ifChild:true //加一个属性，后面来判断是否是子级
            })
        }
    })
})

数据组装完毕，下面是dom

<el-tree
  :data="dataList"
  @node-click="clickHandle"
>
	// 使用了插槽，没有用jsx形势的render-content，因为！！！很难用！！！ 事件绑定很蛋疼
     // 这里区分了父级和子级，主要是，子级需要特殊的展示形式，及事件
	<div slot-slope="{ node, data }">
          <div v-if="data.ifChild" @mouseenter="checkTreeName" @click="chooseThis">
            <span>{{node.label}}</span>
            <span @click.stop="toMonitorDetail(data.info.id)">
              文字
            </span>
          </div>
     
          <div v-else>
            {{ node.label }}
          </div>
	</div>
</el-tree>

下面是事件的处理，也就是修改is-current

	// node-click返回三个参数，这里用到了第一个和第三个
    clickHandle(data,node,ele){
    	// 上面组装数据的时候添加的k-v，data默认带回来了
        //这里就是子级了
        if(data.ifChild){
            //这里存一下是子级的元素，防止eleui点击父级的之后找不到上一次的子级。
            this.chooseEle = ele.$el
            // 移除其他子级的is-current这个class
            const eles = document.querySelectorAll('.el-tree-node__children .el-tree-node.is-focusable')
            for (let i = 0; i < eles.length; i++) {
              eles[i].classList.remove('is-current')
            }
            // 给当前点击的这个子级添加is-current这个class
            this.chooseEle.classList.add('is-current')
        }else{
            // 如果点击的是父级，则移除父级的is-current这个class
            ele.$el.classList.remove('is-current')
            // 第一次点击的时候，this.chooseEle并没有指定，所以判断一次
            if (this.chooseEle) {
            // 上面已经存了，所以移除父级的is-current之后，给之前点击过得子级添加回is-current这个class
              this.chooseEle.classList.add('is-current')
            }
        }
    }

打完收工