在vue3中使用el-checkbox-group

在Vue 3中，使用`el-checkbox-group`可以实现多选框的功能。下面是一个示例代码：

<template>
  <el-checkbox-group v-model="selectedFruits">
    <el-checkbox label="apple">Apple</el-checkbox>
    <el-checkbox label="banana">Banana</el-checkbox>
    <el-checkbox label="orange">Orange</el-checkbox>
  </el-checkbox-group>
</template>

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

export default {
  setup() {
    const selectedFruits = ref([]);

    return {
      selectedFruits
    };
  }
};
</script>

在上面的代码中，我们使用`el-checkbox-group`组件来创建一个多选框组。通过`v-model`指令将选中的值绑定到`selectedFruits`变量上。当用户选择或取消选择一个选项时，`selectedFruits`的值会自动更新。

你可以根据自己的需求修改选项的标签和值。在`selectedFruits`变量中，你可以获取到用户选择的所有值。

相关问题

vue2在el-select 下拉框中使用el-checkbox-group实现多选

可以使用el-select的slot来自定义下拉框的选项，然后在自定义选项中使用el-checkbox-group实现多选。

示例代码如下：

<template>
  <el-select v-model="selectedOptions" multiple placeholder="请选择">
    <template #default>
      <el-checkbox-group v-model="selectedOptions">
        <el-checkbox label="Option 1"></el-checkbox>
        <el-checkbox label="Option 2"></el-checkbox>
        <el-checkbox label="Option 3"></el-checkbox>
      </el-checkbox-group>
    </template>
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      selectedOptions: []
    }
  }
}
</script>

在上面的代码中，我们使用el-select的slot来自定义下拉框的选项，然后在自定义选项中使用el-checkbox-group实现多选。v-model绑定了选中的选项，即selectedOptions。

vue2使用el-checkbox-group实现多选

可以按照以下步骤使用 `el-checkbox-group` 实现多选：

1. 在 Vue 组件中引入 `el-checkbox-group` 和 `el-checkbox` 组件：

<template>
  <el-checkbox-group v-model="checkedFruits">
    <el-checkbox label="apple">Apple</el-checkbox>
    <el-checkbox label="banana">Banana</el-checkbox>
    <el-checkbox label="orange">Orange</el-checkbox>
  </el-checkbox-group>
</template>

<script>
  import { ElCheckboxGroup, ElCheckbox } from 'element-ui';

  export default {
    components: {
      ElCheckboxGroup,
      ElCheckbox,
    },
    data() {
      return {
        checkedFruits: [],
      };
    },
  };
</script>

2. 定义一个数组 `checkedFruits` 用于存储选中的水果的值。

3. 在 `el-checkbox-group` 中使用 `v-model` 绑定 `checkedFruits` 数组，这样选中的水果值就会被存储在 `checkedFruits` 中。

4. 在 `el-checkbox` 组件中使用 `label` 属性指定水果的值。

5. 如果需要在表单中提交选中的水果值，可以将 `checkedFruits` 数组绑定到表单的 `v-model` 上，这样选中的水果值就会被提交给后端。例如：

<template>
  <form @submit.prevent="submitForm">
    <el-checkbox-group v-model="checkedFruits">
      <el-checkbox label="apple">Apple</el-checkbox>
      <el-checkbox label="banana">Banana</el-checkbox>
      <el-checkbox label="orange">Orange</el-checkbox>
    </el-checkbox-group>

    <button type="submit">Submit</button>
  </form>
</template>

<script>
  import { ElCheckboxGroup, ElCheckbox } from 'element-ui';

  export default {
    components: {
      ElCheckboxGroup,
      ElCheckbox,
    },
    data() {
      return {
        checkedFruits: [],
      };
    },
    methods: {
      submitForm() {
        // 提交表单时将选中的水果值发送到后端
        console.log(this.checkedFruits);
      },
    },
  };
</script>