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: []
  }
}

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

请用element-ui和vue实现v-for循环el-checkbox-group 中的el-checkbox ，请用假数据配合具体代码实现

好的，我可以为您提供一个简单的例子，具体代码如下：

<template>
  <div>
    <el-checkbox-group v-model="checkedCities">
      <el-checkbox v-for="city in cities" :key="city.value" :label="city.label">{{ city.label }}</el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checkedCities: [],
      cities: [
        { value: 'Shanghai', label: '上海' },
        { value: 'Beijing', label: '北京' },
        { value: 'Guangzhou', label: '广州' },
        { value: 'Shenzhen', label: '深圳' },
        { value: 'Hangzhou', label: '杭州' }
      ]
    }
  }
}
</script>

这里使用了 element-ui 中的 `el-checkbox-group` 和 `el-checkbox` 组件，通过 `v-for` 循环遍历了 `cities` 数组，动态生成多个 `el-checkbox`，最终将选中的城市存储在 `checkedCities` 数组中。注意，这里的 `v-model` 绑定了 `checkedCities`，表示这是一个双向绑定的变量，可以读取选中的值，也可以设置选中的值。