vue+elementui多选框el-checkbox-group

vue和ElementUI是一种很受欢迎的前端开发技术和UI库，el-checkbox-group是ElementUI所提供的多选框组件，它可以在vue应用中快速实现多选框的功能。

使用el-checkbox-group需要先引入ElementUI库，它提供了一套完整的UI组件库，包括表单、弹窗、导航、布局等。

在vue组件中，使用el-checkbox-group可以通过v-model绑定一个数据来获取所选的所有值。这个数据可以是一个数组，也可以是一个对象。

el-checkbox-group会根据传入的options数组来生成多选框，每个选项都是一个对象，包括label和value两个属性。其中label用来表示选项的文本，value用来表示选项的值。

通过设置el-checkbox-group的属性，可以定制多选框的风格和功能，比如设置禁用、设置默认选中的值、设置最多可选数量等。

在实际的开发中，el-checkbox-group通常用于表单中的多选题、筛选条件等场景中。它的使用非常简单，只需按照规定格式传入选项数据即可实现多选框的功能，为vue开发提供了很大的便利。

相关问题

vue+element ui 表单校验el-checkbox

怎么实现只选中一个的校验？

A: 可以通过自定义校验规则来实现只选中一个的校验。具体实现方式如下：

1. 在 el-checkbox-group 中添加 rules 属性，值为自定义的校验规则函数。

<el-checkbox-group v-model="checkedList" :rules="checkOneRule">
  <el-checkbox label="选项一"></el-checkbox>
  <el-checkbox label="选项二"></el-checkbox>
  <el-checkbox label="选项三"></el-checkbox>
</el-checkbox-group>

2. 编写 checkOneRule 自定义规则函数，使用 Array.prototype.filter 方法筛选出选中的复选框，然后根据选中数量判断是否合法。

checkOneRule(rule, value, callback) {
  if (value && value.length === 1) {
    callback();
  } else {
    callback(new Error('请选择一个选项'));
  }
}

3. 在 data 中定义 checkedList 数组来存储选中的值。

data() {
  return {
    checkedList: []
  }
}

这样就能实现只选中一个的校验了。

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>