el-tree单独设置父节点icon，清除el-tree的节点选背景色

效果图：

HTML代码：

data代码：

 这里treeData是其他组件传过来的

watch监听：对数据进行监听，使数据状态可更新

methods方法定义，这里只做了样式处理：

 css代码：

 

 

 

 

完整代码：

<template>

  <div class="tree_box">

    <el-card>

        <div>

            <span class="orgint">{{treeTitle}}</span>

            <el-input  v-if="treeSearch" placeholder="快速搜索" v-model="speedTit" class="orgTreeInp">

                <i slot="suffix" class="el-icon-search" @click="speedSearch"></i>

            </el-input>

        </div>

        <div style="margin-top:15px;">

            <div :class="[{chegFaActive:chengfaBack},chengfa]" @click="chengfaClick">

                <i class="el-icon-office-building cheng_icon"></i>

                城发集团

                <i v-if="!cfActive" class="el-icon-arrow-up icon_right"></i>

                <i v-else class="el-icon-arrow-right icon_right"></i>

            </div>

            <!-- :expand-on-click-node="false" -->

            <el-tree v-if="!cfActive" ref="treeRef" :data="leftTreeData[0].children" node-key="id" :props="defaultProps" default-expand-all @node-click="handleNodeClick" highlight-current class="flow-tree">

                <span class="custom-tree-node" slot-scope="{node}">

                    <span>

                        {{node.label}}

                        <i class="el-icon-arrow-up"></i>

                    </span>

                </span>

            </el-tree>

        </div>

    </el-card>

  </div>

</template>

<script>

export default {

    props:["treeTitle","treeData","treeSearch"],

    data(){

        return{

            speedTit:'',

            defaultProps: {

                children: 'children',

                label: 'label'

            },

            leftTreeData:[

                {

                    "label":'城发集团',//label

                    "id":'0',//id

                    "createTime": "2022-04-02 23:46:55",//创建时间

                    "updateTime": "2022-04-02 23:46:55",//更新时间

                    "orgType": "组织单元",//组织类型

                    "orgCode": "chnegfa001",//组织编码

                    "status": "1",//组织状态

                    "orgName": "城发集团",//组织名称

                    "superiorOrgName": null, //上级组织单元

                    "orgDescribe": "网关测试",//描述

                    children:this.treeData||[]

                }

            ],

            cfActive:false,

            chengfa:'chengfa',

            chengfaBack:true,

        }

    },

    watch:{

        treeData:{

            handler(newVal,oldVal){

                this.leftTreeData[0].children=newVal;

            },

            deep:true

        }

    },

    created(){

        // console.log(this.treeData);

    },

    methods:{

        speedSearch(){

            console.log(this.speedTit,"快速搜索")

        },

        handleNodeClick(data) {

            console.log(data);

            this.chengfaBack=false;

        },

        chengfaClick(e){

            this.cfActive=!this.cfActive;

            this.chengfaBack=true;

        }

    }

}

</script>

<style lang="scss" scoped>

.tree_box{

    height: 100%;

    padding: 3px;

    .el-card{

        height: 100%;

        .orgint{

            color: #5A5A5A;

            font-weight: 500;

            font-size: 17px;

        }

        .orgTreeInp{

            border: none;

            margin-top: 10px;

            ::v-deep.el-input__suffix{

                display: flex;

                align-items: center;

            }

        }

        ::v-deep.el-input__inner{

            background: #F7F8FA;

            border: none;

        }

        .chengfa{

            height: 26px;

            line-height: 26px;

            position: relative;

            cursor: pointer;

            background-color: #ffffff;

            .cheng_icon{

                font-size: 18px;

                font-weight: 500;

                padding-left: 3px;

            }

            .icon_right{

                font-size: 13px;

                position: absolute;

                top: 5px;

                right: 3px;

            }

        }

        .chengfa:hover{

            background-color: #F8F7F7;

        }

        .chegFaActive{

            background-color: #edf6ff;

        }

        .chegFaActive:hover{

            background: #edf6ff;

        }

        .flow-tree{

            padding-left: 10px;

            ::v-deep.el-tree-node__expand-icon.expanded {

                -webkit-transform: rotate(0deg);

                transform: rotate(0deg);

            }

            //有子节点 且未展开

            ::v-deep.el-icon-caret-right:before {

                background: url('~@/assets/icon.png') no-repeat;

                content: '';

                display: block;

                width: 16px;

                height: 16px;

                font-size: 16px;

                background-size: 16px;

            }

            ::v-deep.el-icon-caret-right .custom-tree-node .el-icon-arrow-up:before{

                content: '>';

                display: block;

                color: #000000;

                font-weight: 300;

                width: 16px;

                height: 16px;

                font-size: 16px;

                background-size: 16px;

            }

            //有子节点 且已展开

            ::v-deep.el-tree-node__expand-icon.expanded.el-icon-caret-right:before {

                background: url('~@/assets/icon.png') no-repeat;

                content: '';

                display: block;

                width: 16px;

                height: 16px;

                font-size: 16px;

                background-size: 16px;

            }

            ::v-deep.el-tree-node__expand-icon.expanded.el-icon-caret-right .custom-tree-node .el-icon-arrow-up:before {

                content: '∧';

                display: block;

                color: #000000;

                width: 16px;

                height: 16px;

                font-size: 16px;

                background-size: 16px;

            }

            //没有子节点

            ::v-deep.el-tree-node__expand-icon.is-leaf:before {

                background: transparent;

                content: '';

            }

            ::v-deep.el-tree-node__expand-icon.is-leaf .custom-tree-node .el-icon-arrow-up:before{

                background: transparent;

                content: '';

            }

        }

        ::v-deep .el-tree-node__content{

            position: relative;

        }

        ::v-deep .el-icon-arrow-up{

            position: absolute;

            right: 0;

        }

    }

}

</style>

简单概括说明：

我这里只是一个刚初步封装的公共组件，但这里主要是记录：根据ui处理机构树的样式问题，这里的父节点是根据数据写死的，第一子节点是组件传来的；

当点击子节点清除父节点的背景，是根据改变动态绑定的class来改变的；

这里点击父节点隐藏和去除子节点的选中效果与背景，取了一个巧，即直接在dom节点树中去除了el-tree；

父节点的划过效果也是用了class：hover来覆盖另一个class：hover来实现的；

总体来说还是用简单的方式实现了看似复杂的效果；

这篇好文章是转载于：学新通技术网