说好的学习计划来了，用十天的时间，深入了解一下饿了么的组件，简单的记录一下，首先上文档：

资料相关

星星指数：star:55k 中文文档： https://element.eleme.cn/#/zh-CN/component/checkbox Github 地址： https://github.com/PanJiaChen/vue-element-admin Demo体验： https://panjiachen.github.io/vue-element-admin/#/dashboard

首先根据文档上的示例，实现一个多选框功能，大概是这个样子的。 示例可自行查看： https://element.eleme.cn/#/zh-CN/component/checkbox

<template>
  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
  </el-checkbox-group>
</template>
<script>
  const cityOptions = ['上海', '北京', '广州', '深圳'];
  export default {
    data() {
      return {
        checkedCities: ['上海'],
        cities: cityOptions,
    methods: {
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
</script>

实际应用，在实际的开发里面，我们还需要将选中的多选框的值传给后台，那么vue 怎么将Checkbox 多选框选中的值提交？比如说以字符串数组的形式提交给后端。

["上海","北京"]

写了一个简单额示例：

<template>
    <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
      <el-checkbox v-for="city in cities" :label="city"  :key="city"> {{ city }} </el-checkbox>
    </el-checkbox-group>
    <el-button type="primary" @click="createData()">确定</el-button>
</template>
<script>
const cityOptions = ["上海", "北京", "广州", "深圳"];
export default {
  data() {
    return {
      checkedCities: ["上海", "北京"],
      cities: cityOptions,
  methods: {
    async createData() {
      const params = {};
      params.city = this.checkedCities;
      alert(JSON.stringify(params));
    handleCheckedCitiesChange(value) {