Vue/Element-Plus：如何将循环变量传入子组件el-tree？

1. 给Timeline循环项绑定唯一key #

Vue的列表渲染必须绑定唯一key，否则无法正确追踪每个项的状态，会导致渲染异常。务必给<el-timeline-item>设置key，推荐用数据的唯一标识（比如id）。

2. 确认数据结构匹配Tree组件要求 #

Tree组件的data属性需要是包含label（必填）和可选children的数组结构，示例数据格式：

const jobList = [
  {
    id: 1,
    time: "2024-05-20",
    treeData: [
      { label: "子任务1-1", children: [{ label: "子子任务1-1-1" }] },
      { label: "子任务1-2" }
    ]
  },
  {
    id: 2,
    time: "2024-05-21",
    treeData: [
      { label: "子任务2-1" },
      { label: "子任务2-2", children: [{ label: "子子任务2-2-1" }, { label: "子子任务2-2-2" }] }
    ]
  }
];

3. 正确传递数据到Tree组件 #

直接在循环中将当前job对应的树数据绑定到el-tree的data属性即可，完整示例代码：

<template>
  <el-timeline>
    <el-timeline-item
      v-for="job in jobList"
      :key="job.id"
      :timestamp="job.time"
    >
      <el-tree
        :data="job.treeData"
        :props="{ label: 'label' }"
        default-expand-all
      />
    </el-timeline-item>
  </el-timeline>
</template>

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

// 模拟任务数据
const jobList = ref([
  {
    id: 1,
    time: "2024-05-20 需求阶段",
    treeData: [
      { label: "用户调研", children: [{ label: "访谈记录整理" }, { label: "需求文档输出" }] },
      { label: "竞品分析" }
    ]
  },
  {
    id: 2,
    time: "2024-05-21 开发阶段",
    treeData: [
      { label: "前端开发", children: [{ label: "页面重构" }, { label: "交互逻辑实现" }] },
      { label: "后端开发", children: [{ label: "接口开发" }, { label: "数据库设计" }] }
    ]
  }
]);
</script>

排查要点 #

• 检查jobList是否正确初始化，若为异步加载的数据，需确保数据请求完成后再渲染组件。
• 打印job.treeData确认数据不为空或undefined，可在循环内加console.log(job)验证。
• 避免在<el-timeline-item>上设置冲突属性，比如错误的自定义时间戳模板导致渲染覆盖。

内容的提问来源于stack exchange，提问作者Ginger_Chacha