el-tree 实现点击子节点父节点也高亮

<el-tree ref="tree" :data="companyList" :props="defaultProps" node-key="key" :highlight-current="true"
                    accordion :current-node-key="currentNode" @node-click="getrigDetail">
                    <div class="custom-tree-node" slot-scope="{ node, data }">
                        <el-row>

                            <el-col :span="12" class="name">{{ node.label }}</el-col>
                            <el-col :span="12" class="col_r"><span class="c_red">{{ data.alarmNum }}</span> / <span
                                    class="c_green">{{ data.runNum }}</span> / <span class="c_blue">{{ data.holdNum
                                    }}</span> / <span class="c_black">{{ data.offlineNum }}</span></el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24" class="col_r">告警数 / 运行数 / 待机数 / 离线数</el-col>
                        </el-row>
                    </div>
                </el-tree>
//方案一
getrigDetail(data, node) {
            if (this.paramsId.companyId !== data.companyId) {
                const parentEle = document.getElementById('is-current')
                if (parentEle) {
                    parentEle.setAttribute('id', '')
                }
            }
           
            this.paramsId.companyId = data.companyId
            this.paramsId.projectId = data.projectId
            this.$nextTick(() => { 
            //判断node有值并且点击的是二级节点
                if (node && node.level === 2) {
                    let parentEle = document.getElementsByClassName('is-current')[0] //拿到选中的节点元素如果有值则获取当前元素的父元素的同级元素添加一个id然后设置这个id的样式,要在每次设置之前先在上面清除上一次设置属性的id
                    if (parentEle) {
                        parentEle.parentNode.previousSibling.setAttribute('id', 'is-current')
                    }
                }
            })
        }
//方案二
 getrigDetail(data, node) {
            
            this.paramsId.companyId = data.companyId
            this.paramsId.projectId = data.projectId
            this.$nextTick(() => {
                if (node && node.level === 1) {
                    if (Array.isArray(node.parent.childNodes) && node.parent.childNodes.length) {
                        node.parent.childNodes.forEach(item => {
                            item.isCurrent = false
                        })
                    }
                    node.isCurrent = true
                } else if (node && node.level === 2) {
                    if (Array.isArray(node.parent.parent.childNodes) && node.parent.parent.childNodes.length) {
                        node.parent.parent.childNodes.forEach(item => {
                            item.isCurrent = false
                        })
                    }
                    node.parent.isCurrent = true

                    // let parentEle = document.getElementsByClassName('is-current')[0]
                    // if (parentEle) {
                    //     parentEle.parentNode.previousSibling.setAttribute('id', 'is-current')
                    // }
                }
            })
        }
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值