Avue 表单中使用插槽来动态生成多个活动岗位和活动人数输入框

Avue 表单组件中，你可以利用 Vue 的插槽（slot）特性来实现动态生成多个活动岗位和活动人数的输入字段。插槽允许你在父组件模板中包含子组件的部分内容，这样可以根据需要动态添加或修改内容。例如：

<template>
  <div>
    <form>
      <!-- 活动岗位部分 -->
      <template v-for="(job, index) in jobTypes" :key="index">
        <label slot="position">职位{{ job.title }}:</label>
        <input type="text" v-model="jobs[index].position">
      </template>

      <!-- 动态生成活动人数部分 -->
      <template v-for="(activity, index) in activities" :key="index">
        <label slot="quantity">活动{{ activity.name }}人数:</label>
        <input type="number" v-model="activities[index].quantity">
      </template>

      <!-- 插槽用于显示其他自定义内容 -->
      <slot></slot>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      jobTypes: ['岗位A', '岗位B'],
      activities: [
        { name: '活动1', quantity: 0 },
        { name: '活动2', quantity: 0 }
      ]
    };
  }
};
</script>

在这个例子中，`jobTypes` 和 `activities` 数组决定了表单中会动态生成多少个工作岗位和活动数量输入框。每个循环中的 `slot` 标签使得可以轻松地为每一个岗位和活动插入独立的标签名。