vue 怎么将Checkbox 多选框选中的值提交

悠悠 2022-12-13 11:26 268阅读 0赞

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

资料相关

星星指数：star:55k  
中文文档：[https://element.eleme.cn/\#/zh-CN/component/checkbox][https_element.eleme.cn_zh-CN_component_checkbox]  
Github 地址：[https://github.com/PanJiaChen/vue-element-admin][https_github.com_PanJiaChen_vue-element-admin]  
Demo体验：[https://panjiachen.github.io/vue-element-admin/\#/dashboard][https_panjiachen.github.io_vue-element-admin_dashboard]

--------------------

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

![format_png][]

实际应用，在实际的开发里面，我们还需要将选中的多选框的值传给后台，那么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>

![format_png 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NTM4MDEy_size_16_color_FFFFFF_t_70][]

[https_element.eleme.cn_zh-CN_component_checkbox]: https://links.jianshu.com/go?to=https%3A%2F%2Felement.eleme.cn%2F%23%2Fzh-CN%2Fcomponent%2Fcheckbox
[https_github.com_PanJiaChen_vue-element-admin]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2FPanJiaChen%2Fvue-element-admin
[https_panjiachen.github.io_vue-element-admin_dashboard]: https://links.jianshu.com/go?to=https%3A%2F%2Fpanjiachen.github.io%2Fvue-element-admin%2F%23%2Fdashboard
[format_png]: /images/20221123/27272bd44eae44f69697eba151087797.png
[format_png 1]: /images/20221123/05beb0a4c8454505817e93991f9c39e8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NTM4MDEy_size_16_color_FFFFFF_t_70]: /images/20221123/844081b8abb74a6e9eb5f3523f9eccc6.png