element plus 循环多个el-check box

Element Plus 是一个基于 Vue.js 的 UI 组件库，它提供了一个叫做 `el-checkbox` 的复选框组件。如果你想在 Element Plus 中循环渲染多个 `el-checkbox`，你可以使用 `v-for` 指令结合数组数据来实现。

假设你有一个数组 items，每个元素都有一个 checkbox 需要显示，可以这样做：

<template>
  <div>
    <el-checkbox-group v-model="selectedItems">
      <!-- 使用 v-for 渲染 -->
      <el-checkbox :label="item.id" v-for="(item, index) in items" :key="index">{{ item.name }}</el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 创建一个 ref 存储选中的项目
const selectedItems = ref([]);

// 假设 items 是这样的数组
const items = [
  { id: 1, name: 'Option 1' },
  { id: 2, name: 'Option 2' },
  // 更多项...
];

export default {
  data() {
    return { items };
  }
};
</script>

在这个例子中，当你勾选一个 `el-checkbox`，`selectedItems` 数组会反映出相应的选择状态。