vue+element-ui,Collapse 折叠面板组件，怎么实现下图中的每个下拉所展示的内容都不一样，如何动态获取的这些数据

<template>
  <el-collapse v-model="activeNames">
    <el-collapse-item v-for="item in items" :key="item.id" :title="item.title">
      <el-table v-if="item.type === 'table'" :data="item.data">
        <el-table-column prop="name" label="Name"></el-table-column>
        <el-table-column prop="age" label="Age"></el-table-column>
        <el-table-column prop="gender" label="Gender"></el-table-column>
      </el-table>
      <div v-else>{{ item.content }}</div>
    </el-collapse-item>
  </el-collapse>
</template>

<script>
export default {
  data() {
    return {
      activeNames: [],
      items: [
        {
          id: 1,
          title: 'Collapse Item 1',
          type: 'table',
          data: [
            { name: 'John', age: 20, gender: 'Male' },
            { name: 'Emma', age: 25, gender: 'Female' },
            { name: 'Tom', age: 22, gender: 'Male' },
          ]
        },
        {
          id: 2,
          title: 'Collapse Item 2',
          type: 'text',
          content: 'This is a text content.'
        }
      ]
    };
  }
};
</script>