说好的学习计划来了，用十天的时间，深入了解一下饿了么的组件，简单的记录一下，首先上文档：
资料相关
星星指数：star:55k
首先根据文档上的示例，实现一个多选框功能，大概是这个样子的。
示例可自行查看：https://element.eleme.cn/#/zh-CN/component/checkbox
<template> <div> <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> </div> </template> <script> const cityOptions = ['上海', '北京', '广州', '深圳']; export default { data() { return { checkedCities: ['上海'], cities: cityOptions, }; }, methods: { handleCheckedCitiesChange(value) { let checkedCount = value.length; } } }; </script>
实际应用，在实际的开发里面，我们还需要将选中的多选框的值传给后台，那么vue 怎么将Checkbox 多选框选中的值提交？比如说以字符串数组的形式提交给后端。
["上海","北京"]
写了一个简单额示例：
<template> <div> <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> </div> </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) { // console.log(value) this.checkedValue = value; }, }, }; </script>
