当前位置：首页 > VUE

vue实现班级随机分组

2026-01-22 18:08:51VUE

Vue实现班级随机分组的方法

准备数据

在Vue组件中定义学生列表和分组结果的数据结构。通常使用数组存储学生姓名，分组结果可以用二维数组表示。

data() {
  return {
    students: ['张三', '李四', '王五', '赵六', '钱七', '孙八', '周九', '吴十'],
    groups: []
  }
}

实现随机分组算法

创建一个方法来随机打乱学生数组并分组。使用Fisher-Yates洗牌算法实现随机排序。

methods: {
  shuffleArray(array) {
    for (let i = array.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [array[i], array[j]] = [array[j], array[i]];
    }
    return array
  },

  randomGroup(groupSize) {
    const shuffled = this.shuffleArray([...this.students])
    this.groups = []

    for (let i = 0; i < shuffled.length; i += groupSize) {
      this.groups.push(shuffled.slice(i, i + groupSize))
    }
  }
}

模板渲染

在模板中添加分组按钮和结果显示区域。

<template>
  <div>
    <button @click="randomGroup(4)">随机分组(每组4人)</button>
    <div v-for="(group, index) in groups" :key="index">
      <h3>第{{ index + 1 }}组</h3>
      <ul>
        <li v-for="student in group" :key="student">{{ student }}</li>
      </ul>
    </div>
  </div>
</template>

处理特殊情况

考虑学生人数不能被组数整除的情况，可以调整最后一组人数或提示用户。

randomGroup(groupSize) {
  if (groupSize <= 0 || groupSize > this.students.length) {
    alert('无效的组大小')
    return
  }

  const shuffled = this.shuffleArray([...this.students])
  this.groups = []

  for (let i = 0; i < shuffled.length; i += groupSize) {
    this.groups.push(shuffled.slice(i, i + groupSize))
  }

  if (this.groups.length > 1 && this.groups[this.groups.length - 1].length < groupSize) {
    console.log('最后一组人数不足')
  }
}

添加更多功能

可以扩展功能，如指定组数而不是每组人数，或保存分组历史。

randomGroupByGroupCount(groupCount) {
  if (groupCount <= 0 || groupCount > this.students.length) {
    alert('无效的组数')
    return
  }

  const shuffled = this.shuffleArray([...this.students])
  this.groups = Array.from({length: groupCount}, () => [])

  shuffled.forEach((student, index) => {
    this.groups[index % groupCount].push(student)
  })
}

样式优化

添加CSS美化分组显示效果。

.group {
  margin: 20px;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

button {
  padding: 8px 16px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

vue实现班级随机分组