實現效果:

直接上代碼:

<template><div><div class="tops"><el-tree  :default-expanded-keys="['1']" ref="myTree" :data="data" :props="defaultProps" @node-click="handleNodeClick" highlight-current node-key="value"><span class="custom-tree-node" slot-scope="{ node, data }"><i v-if="node.level == 1" class="father" /><i v-else-if="node.level == 2" class="son" /><i v-else-if="node.level == 3" />{{ data.label }}</span></el-tree></div></div>
</template><script>
let that=thisexport default {data() {return {data: [{label: '1號生活區',value:'1',isShow:true,//當前折疊部分是否打開children: [{label: '1號樓',value:'1-1',},{label: '2號樓',value:'1-2',},{label: '3號樓',value:'1-3',},{label: '4號樓',value:'1-4',},]}, {label: '2號生活區',value:'2',isShow:false,children: [{label: '1號樓',value:'2-1',},{label: '2號樓',value:'2-2'},]}, {label: '3號生活區',value:'3',isShow:false,children: [{label: '1號樓',value:'3-1',},{label: '2號樓',value:'3-2',},{label: '3號樓',value:'3-3',},]},{label: '4號生活區',value:'4',isShow:false,children: [{label: '1號樓',value:'4-1',},{label: '2號樓',value:'4-2',},{label: '3號樓',value:'4-3',},]}],defaultProps: {children: 'children',label: 'label'},value1: '',value2:'',};},methods: {handleNodeClick(data) {this.$emit('treesVal',data)}, },mounted () {this.$nextTick(function () {this.$nextTick(() => {// myTree 數組件的ref  默認讓第一項高亮 // data是樹組件對應的數據// 通過data中的第一項的id找到對應的節點，然后把這個節點設置為高亮this.$refs.myTree.setCurrentKey(this.data[0].value)});});},};
</script><style lang="scss" scoped>
@import '@/style/util.scss';
.tops{width: vw(260);height: 100%;background-color: #fff;margin: 0 auto;padding:0 vw(8);box-shadow: 0 vw(2) vw(10) 0 rgba(0,5,10,0.1);//設置行高>>>.el-tree-node__content{position: relative;height: vh(52);box-sizing: border-box;}//小三角的位置 以及默認時候的位置>>>.el-tree-node__expand-icon{webkit-transform:rotate(-90deg);transform: rotate(-90deg);user-select: none;position: absolute;top: vh(8);right: 0;} //小三角點擊展開時候旋轉的角度>>>.el-tree-node__expand-icon.expanded{webkit-transform:rotate(90deg);transform: rotate(90deg);user-select: none;}//插入的父級的圖標的樣式  .father {background: url('../assets/img/flower-wxz.png') no-repeat;width: vw(18);height: vw(18);display: inline-block;background-size: 100% 100%;// margin-left: vw(20) !important;margin: 0 vw(8) 0 vw(20) !important;}//插入的自己的圖標樣式.son {width: vw(4);height: vw(4);border-radius: 50%;background: #666666;display: inline-block;background-size: 100% 100%;margin: 0 vw(8) vh(3) vw(35) !important;}//有子節點 且未展開 小三角.el-tree /deep/ .el-icon-caret-right:before {color: #858585;font-weight: 600;}//有子節點 且已展開 小三角.el-tree /deep/ .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {color: #4F8BE2 !important;font-weight: 600;}//沒有子節點 小三角.el-tree /deep/.el-tree-node__expand-icon.is-leaf::before {content: "";display: block;font-weight: 600;width: vw(12);height: vw(12);font-size: vw(16);background-size: 100% 100%;}>>>.el-tree-node__content .custom-tree-node{font-family: 'pfm';font-size: vw(16);color: #4e4e4e;line-height: vh(52);font-weight: 500;user-select: none;}>>>.el-tree-node__children .el-tree-node .el-tree-node__content .custom-tree-node{font-family: 'pf';font-size: vw(16);color: #666666;line-height: vh(52);font-weight: 500;user-select: none;}>>>.el-tree-node__content {border-left: vw(4) solid  transparent;}//選中顏色/deep/ .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {background: #ECF4FF !important;border-left: vw(4) solid  #4F8BE2;span{color: #4F8BE2;font-weight: 600;}.father {background: url('../assets/img/flower-xz.png') no-repeat;width: vw(18);height: vw(18);display: inline-block;background-size: 100% 100%;// margin-left: vw(20) !important;margin: vh(-3) vw(8) 0 vw(20) !important;}.son {width: vw(4);height: vw(4);border-radius: 50%;background:  #4F8BE2;display: inline-block;background-size: 100% 100%;margin: 0 vw(8) vh(3) vw(35) !important;}    }}
</style>

?