在el-timeline中如何根据数组中多个不同的missionname，显示对应missionname下的eltimeline

在Element UI的Timeline组件中，你可以根据`missionname`属性动态生成多个子Timeline。首先，你需要确保数据结构是这样的：一个包含多个`missionname`和对应时间线条（可能是事件）的数组。然后，在Vue组件模板中使用`v-for`循环遍历这个数组。

假设你有这样一个数组：

data() {
  return {
    timelineData: [
      { missionname: 'Mission 1', events: ... },
      { missionname: 'Mission 2', events: ... },
      // 更多missionname...
    ]
  };
}

在模板中，你可以这样做：

<template>
  <el-timeline :type="timelineType" :default-time-style="defaultTimeStyle">
    <!-- 使用v-for循环遍历数组 -->
    <el-timeline-item v-for="(item, index) in timelineData" :key="index">
      <template slot="title">{{ item.missionname }}</template> 
      <div slot="content">
        <p>{{ item.events[0].description }} ({{ item.events[0].time }})</p>
        <!-- 可能还有其他事件...显示更多用同样的方式 -->
      </div>
    </el-timeline-item>
  </el-timeline>
</template>

这里，`timelineType`和`defaultTimeStyle`可以根据需求设置Timeline的基本样式，`item.events`是每个missionname下对应的时间线事件列表。

如果你想让每个missionname下面的Timeline有自己的配置，你可以在每次循环时传递不同的props：

<el-timeline :type="item.timelineConfig.type" :default-time-style="item.defaultTimeStyle" v-for="(item, index) in timelineData" :key="index">
  ...
</el-timeline>

然后在父组件的数据中定义这些配置：

data() {
  return {
    timelineTypeOptions: ['line', 'dot'], // 示例配置类型选项
    defaultTimeStyleOptions: [{ type: 'start', color: '#f50' }, { type: 'center', color: '#999' }], // 示例配置默认时间风格选项

    // 对应配置数组，每个missionname有自己的配置
    timelineDataWithConfigs: [
      { missionname: 'Mission 1', timelineConfig: ..., events: ... },
      { missionname: 'Mission 2', timelineConfig: ..., events: ... },
      // 更多missionname...
    ]
  };
}