element checkbox组件选中与未选中时对应的value值定义

element checkbox组件选中与未选中时对应的value值定义

1、默认情况下：在el-checkbox元素中定义v-model绑定变量，单一的checkbox中，默认绑定变量的值会是Boolean，选中为true。

<template>
  <!-- `checked` 为 true 或 false -->
  <el-checkbox v-model="checked">备选项</el-checkbox>
</template>
<script>
  export default {
    data() {
      return {
        checked: true
      };
    }
  };
</script>

2、checkbox-group元素能把多个 checkbox 管理为一组，只需要在 Group 中使用v-model绑定Array类型的变量即可。 el-checkbox 的 label属性是该 checkbox 对应的值，若该标签中无内容，则该属性也充当 checkbox 按钮后的介绍。label与数组中的元素值相对应，如果存在指定的值则为选中状态，否则为不选中。

<template>
  <el-checkbox-group v-model="checkedCities">
    <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
      };
    }
  };
</script>

3、存在多个值相等的checkbox，要实现各个复选框之间的选中状态相互不影响，可以使用true-label和false-label属性自定义对应的值，属性值可以是字符串也可以是数字。

<template>
    <el-checkbox :true-label="1" :false-label="0"  v-model="checkList" @change="change">复选框 A</el-checkbox>
    <el-checkbox :checked="checkList1" v-model="checkList1">复选框B </el-checkbox>
    <el-checkbox v-model="checkList2">复选框 C</el-checkbox>
  <el-checkbox :true-label="1" :false-label="0"  v-model="checkList3" @change="change">复选框 D</el-checkbox>
    <el-checkbox :checked="checkList1" v-model="checkList4">复选框E</el-checkbox>
    <el-checkbox v-model="checkList5">复选框 F</el-checkbox>
</template>
<script>
  export default {
    data () {
      return {
        checkList: 1,
        checkList1: 1,
        checkList2: 0,
        checkList3: 0,
        checkList4: 1,
        checkList5: 0
      };
    }
  }
</script>