html原生表格中循环el-checkbox-group

在HTML原生表格中循环使用`el-checkbox-group`，通常是结合Vue.js等前端框架来实现的，因为原生HTML并不支持直接的循环语法。这里以Vue.js为例进行说明。

首先，你需要在Vue组件的data中定义一个数组，用来存放需要展示的数据。然后，在模板中使用`v-for`指令进行循环渲染，同时结合`el-checkbox-group`和`el-checkbox`来实现复选框的组。

下面是一个简单的例子，假设我们要展示一个人员列表，并允许用户选择多个人员：

<template>
  <table>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
      <th>选择</th>
    </tr>
    <tr v-for="(person, index) in peopleList" :key="person.id">
      <td>{{ person.name }}</td>
      <td>{{ person.age }}</td>
      <td>{{ person.gender }}</td>
      <td>
        <el-checkbox-group v-model="selectedPersonIds">
          <el-checkbox :label="person.id" :key="person.id">{{ person.name }}</el-checkbox>
        </el-checkbox-group>
      </td>
    </tr>
  </table>
</template>

<script>
export default {
  data() {
    return {
      peopleList: [
        { id: 1, name: '张三', age: 30, gender: '男' },
        { id: 2, name: '李四', age: 24, gender: '女' },
        // 更多人员信息...
      ],
      selectedPersonIds: [] // 选中的人员ID列表
    };
  }
};
</script>

在这个例子中，`peopleList`数组包含了人员的信息，每个人员对象包含`id`、`name`、`age`和`gender`属性。`selectedPersonIds`是一个数组，用于存储用户选中的人员ID。`el-checkbox-group`绑定了`selectedPersonIds`，每个`el-checkbox`的`label`属性绑定到人员的ID，显示的文本是人员的姓名。