VUE实现checkBox至少选择一个并提示

雨点打透心脏的1/2处 2022-10-10 06:03 323阅读 0赞

**目录**

1.VUE环境和工程搭建

2.引入Element UI

3.代码实现

4.效果

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

# 1.VUE环境和工程搭建 #

[https://blog.csdn.net/qq\_26154077/article/details/105470192][https_blog.csdn.net_qq_26154077_article_details_105470192]

# 2.引入Element UI #

[https://element.eleme.cn/\#/zh-CN/component/installation][https_element.eleme.cn_zh-CN_component_installation]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MTU0MDc3_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MTU0MDc3_size_16_color_FFFFFF_t_70 1][]

# 3.代码实现 #

<template>
      <div class="hello">
        <h1>Div Web1122</h1>
        <el-checkbox-group v-model="checkedCities">
          <template v-for="(city, index) in cities">
            <el-checkbox @change="changeCheckBox(index, checkedCities)" :label="city" :key="index">{
       {city}}</el-checkbox>
          </template>
        </el-checkbox-group>
      </div>
    </template>
    
    <script>
      const cityOptions = ['网络调整', '补丁', '升级'];
      export default {
        data() {
          return {
            checkedCities: ['网络调整', '补丁', '升级'],
            cities: cityOptions
          };
        },
        methods: {
          changeCheckBox(index, checkedCities) {
            if (checkedCities.length == 0) {
              alert("至少选择一个")
              checkedCities.push(cityOptions[index])
            }
          }
        }
      };
    </script>
    
    <style scoped>
    </style>

# 4.效果 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MTU0MDc3_size_16_color_FFFFFF_t_70 2][]

[https_blog.csdn.net_qq_26154077_article_details_105470192]: https://blog.csdn.net/qq_26154077/article/details/105470192
[https_element.eleme.cn_zh-CN_component_installation]: https://element.eleme.cn/#/zh-CN/component/installation
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MTU0MDc3_size_16_color_FFFFFF_t_70]: /images/20221005/cdd9c61b823b4de2aba267a6ef8cc4ac.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MTU0MDc3_size_16_color_FFFFFF_t_70 1]: /images/20221005/fddd8f448d3e4f088527c608cd37fbc2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MTU0MDc3_size_16_color_FFFFFF_t_70 2]: /images/20221005/95d1f808914e4779a5c1e443fc8e0c15.png