elementui中el-checkbox 选中时的详细介绍

checkbox-group 把多个checkbox管理为一组(需要注意的坑)

很多时候我们需要会遇见这样的场景。
比如用户需要选择多个值.
这个时候我们需要把多个 checkbox 放置在checkbox-group下。
目的是:需要知道用户选择了那些值，并且把这些值发送给后台。

勾选其中一个值时--自动勾选了全部

<template>
  <div class="box">
      <el-checkbox-group v-model="checkList">
        <el-checkbox label="复选框 A"></el-checkbox>
        <el-checkbox label="复选框 B"></el-checkbox>
        <el-checkbox label="复选框 C"></el-checkbox>
      </el-checkbox-group>
  </div>
</template>

<script>
export default {
  data() { 
    return {
      checkList:'', 
    }
  },
}
</script>

为什么会出现上面这样的情况-如何解决

checkbox-group元素能把多个 checkbox 管理为一组.
只需要在 Group 中使用v-model绑定Array类型的变量即可。
如果是v-model绑定的值是字符串。则会出现勾选其中一个值时,自动勾选了全部。
解决办法：
将checkList的值变为数组就可以解决这个  checkList:[]

选中的是中文值，发送给后台的是它的对应值

<template>
  <div class="box">
      <el-checkbox-group v-model="checkList">
        <!-- label绑定的值是要传的值 -->
        <el-checkbox :label="item.value" v-for="(item,index) in listArr" :key="index">
          <!-- 视图上显示给用户看的值 -->
          {{ item.label }}
        </el-checkbox>
      </el-checkbox-group>
      <el-button @click="sendHandler">传递的值</el-button>
  </div>
</template>
<script>
export default {
data() { 
  return {
    listArr: [
      { label: '复选框 A', value: 'a' },
      { label: '复选框 B', value: 'b' },
      { label: '复选框 C', value: 'c' },
      { label: '复选框 C', value: 'd' },
    ],
    checkList:['a'], //他必须是普通的数组. 会默认选中 ”复选框 A“
  }
},

methods: {
  sendHandler() { 
    console.log( '获取的值', this.checkList)
  }
}
}
</script>

需要注意的点

1. el-checkbox-group上绑定的值就是默认选中的值。
这个值有个要求他必须是普通的数组，不能是对象数组那种。