u-desk/docs/04-功能迭代/GO-DESK-2.数据库客户端/核对报告/连接列表修复说明.md

连接列表未显示问题修复说明

问题原因

1. 模板条件逻辑冲突

原代码存在 v-else-if 和 v-else 同时使用的情况，导致 Vue 渲染逻辑混乱：

<div v-else-if="treeData.length === 0" class="tree-empty">
  <!-- 空状态 -->
</div>
<div v-else class="connection-tree">  <!-- 与上面的 v-else-if 冲突 -->
  <div v-if="treeData.length > 0">
    <a-tree ...>

问题：v-else-if 后面不能再使用 v-else，需要改为独立的 v-else-if 条件。

2. a-tree 组件属性名

• 错误：:tree-data="treeData" (旧版本或不存在的属性)
• 正确：:data="treeData" (Arco Design Vue 官方属性)

修复方案

修正后的模板结构

<div class="sidebar-content">
  <!-- 加载状态 -->
  <div v-if="loading" style="padding: 20px; text-align: center;">
    <a-spin/>
    <div>加载中...</div>
  </div>
  
  <!-- 空状态 -->
  <div v-else-if="!loading && treeData.length === 0" class="tree-empty">
    <a-empty description="暂无连接，点击上方按钮创建连接" :image="false"/>
  </div>
  
  <!-- 连接树形列表 -->
  <div v-else-if="!loading && treeData.length > 0" class="connection-tree">
    <a-tree
        :data="treeData"
        :field-names="{ key: 'key', title: 'title', children: 'children' }"
        :block-node="true"
        :default-expand-all="false"
        @select="handleTreeSelect"
        @expand="handleTreeExpand"
    >
      <!-- 树节点内容 -->
    </a-tree>
  </div>
</div>

关键改动

1. 条件分离：每个状态都有独立的 v-if / v-else-if 条件
2. 明确 !loading 检查：避免加载状态与空状态冲突
3. 移除不必要的嵌套：直接在 connection-tree div 中渲染 a-tree
4. 使用正确的属性名：:data 而非 :tree-data

测试验证

• 加载状态正常显示
• 空状态正常显示
• 有数据时树形列表正常显示
• 连接节点可点击选择
• 连接节点编辑/删除按钮正常显示

参考

• Arco Design Vue 官方文档：a-tree 组件使用 :data 属性
• lab-admin 项目示例：所有 a-tree 使用方式都是 :data="treeData"