frontend/src/views/management/userEquipment/towerInformation/components/towerSide.vue

<template>
    <div class="towerSide">
        <el-tree
            :data="data"
            :expand-on-click-node="false"
            :props="defaultProps"
            @node-click="handleNodeClick"
            default-expand-all
            highlight-current
            node-key="id"
            :default-expanded-keys="expandDefault"
        ></el-tree>
    </div>
</template>
<script>
import bus from '../../../../../components/common/bus';
import { getListCompany } from '@/utils/api/index';
export default {
    data() {
        return {
            expandDefault: [], //默认选中第一项
            data: [],
            defaultProps: {
                children: 'children',
                label: 'text'
            }
        };
    },
    // 为了选中第一层级下的第一个节点
    watch: {
        expandDefault(newVal, oldVal) {
            if (newVal) {
                this.$nextTick(() => {
                    document.querySelector('.el-tree-node__content').click();
                });
            }
        }
    },

    created() {
        getListCompany({
            companyId: 'f7d966d1-f3d1-4802-946d-ad93e1ee1b9b',
            lineName: ''
        }).then((res) => {
            //console.log(res.data);
            this.expandDefault.push(res.data.$treeNodeId);
            this.data = res.data;
        });
    },
    methods: {
        handleNodeClick(data) {
            //console.log(data);
            bus.$emit('nodeData', data);
        }
    }
};
</script>
<style lang="less">
.towerSide {
    width: 234px;
    height: 100%;
    border-right: 1px solid @border-color-base;
    // 修改选中的样式
    .el-tree {
        .el-tree-node__content {
            height: 32px;
        }
    }
    .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
        background-color: @color-primary;
        color: @color-white;
    }
}
</style>