CMVR-IOT-UI/src/views/is/im/TreePanel/TreePanel.vue

<template>
  <div class="tree-panel">
    <div class="tree-header">
      车机版本树
    </div>
    <div class="tree-container">
      <el-tree
        ref="treeRef"
        :data="treeData"
        node-key="id"
        :props="treeProps"
        :expand-on-click-node="false"
        :highlight-current="true"
        default-expand-all
        @node-click="handleNodeClick"
      >
        <template #default="{ node, data }">
          <span class="custom-tree-node">
            <span>{{ node.label }}</span>
          </span>
        </template>
      </el-tree>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 定义 emits
const emit = defineEmits()

// 树形结构数据
const treeData = ref([
  {
    id: 1,
    label: '特斯拉',
    level: 1,
    description: '电动汽车制造商',
    children: [
      {
        id: 11,
        label: 'Model 3',
        level: 2,
        description: '中型电动轿车',
        parentId: 1,
        children: [
          {
            id: 111,
            label: 'V11.0',
            level: 3,
            description: '2023年车机系统版本',
            parentId: 11
          }
        ]
      }
    ]
  },
  {
    id: 2,
    label: '比亚迪',
    level: 1,
    description: '中国新能源汽车品牌',
    children: [
      {
        id: 21,
        label: '汉 EV',
        level: 2,
        description: '旗舰电动轿车',
        parentId: 2,
        children: [
          {
            id: 211,
            label: 'DiLink 4.0',
            level: 3,
            description: '智能网联系统',
            parentId: 21
          }
        ]
      }
    ]
  }
])

// 树形配置
const treeProps = {
  children: 'children',
  label: 'label'
}


// 树节点点击
function handleNodeClick(data) {
  emit('node-click', data)
}

</script>

<style scoped>
.tree-panel {
  height: 100%;
  background: white;
  border-right: 1px solid #e4e7ed;
  display: flex;
  flex-direction: column;
}

.tree-header {
  padding: 16px;
  border-bottom: 1px solid #e4e7ed;
}

.tree-container {
  flex: 1;
  padding: 16px;
  overflow: auto;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

.node-actions {
  display: flex;
  gap: 4px;
}

:deep(.el-tree-node__content) {
  height: 36px;
}

:deep(.el-tree-node__content:hover) {
  background-color: #f5f7fa;
}
</style>