帮我用vue写一个el-checkbox多选传值例子

好的，以下是一个简单的例子：

首先，在你的Vue组件中引入el-checkbox组件：

<template>
  <el-checkbox-group v-model="checkedList">
    <el-checkbox v-for="item in options" :label="item.value" :key="item.id">
      {{ item.label }}
    </el-checkbox>
  </el-checkbox-group>
</template>

<script>
export default {
  data() {
    return {
      checkedList: [], // 选中的值将存储在这个数组中
      options: [
        { id: 1, label: '选项1', value: 'option1' },
        { id: 2, label: '选项2', value: 'option2' },
        { id: 3, label: '选项3', value: 'option3' }
      ]
    }
  }
}
</script>

在上面的代码中，我们使用了el-checkbox-group和el-checkbox组件来创建多选框。我们使用v-model指令将选中的值存储在checkedList数组中。在el-checkbox组件中，我们使用label属性来指定每个选项的值。

接下来，我们可以在组件中使用computed属性来获取选中的值：

computed: {
  selectedOptions() {
    return this.options.filter(option => this.checkedList.indexOf(option.value) !== -1)
  }
}

在上面的代码中，我们使用filter()方法过滤出选中的选项，并将它们存储在selectedOptions数组中。

最后，我们可以在模板中使用selectedOptions数组来显示选中的选项：

<template>
  <div>
    <el-checkbox-group v-model="checkedList">
      <el-checkbox v-for="item in options" :label="item.value" :key="item.id">
        {{ item.label }}
      </el-checkbox>
    </el-checkbox-group>

    <div v-if="selectedOptions.length > 0">
      <h4>选中的选项:</h4>
      <ul>
        <li v-for="option in selectedOptions" :key="option.id">{{ option.label }}</li>
      </ul>
    </div>
  </div>
</template>

在上面的代码中，我们使用v-if指令来检查selectedOptions数组是否为空，如果不为空，则显示选中的选项列表。我们使用v-for指令来循环遍历selectedOptions数组，并显示每个选项的标签。