el-checkbox如何同时获得value值和label的值

在使用el-checkbox时有时候需要往后台传送value值（定义的code）和label值，el-checkbox组件默认获取的都是label属性中的值，如果label中设置的是code，那如何获取el-checkbox的显示文字（label）呢？

我们可以将value与label拼接在一起赋值给checkbox的label属性，然后获取的时候进行处理。
以el-checkbox-group为例：

<template>
  <el-checkbox-group v-model="checkList" @change="selectBox">
    <el-checkbox label="1:复选框A">复选框A</el-checkbox>
    <el-checkbox label="2:复选框B">复选框B</el-checkbox>
    <el-checkbox label="3:复选框C">复选框C</el-checkbox>
  </el-checkbox-group>
</template>

<script>
  export default {
    
    
    data () {
    
    
      return {
    
    
        checkList: [],
        values: [],  // 存储value的数组
        labels: []   // 存储label的数组
      };
    },
    methods:{
    
    
	  selectBox(val){
    
    
	  	console.log("val",val);
	  	// 首先要初始化这两个数组，因为当取消checkbox的时候，数组中就不能有当前取消的值。
	    this.values = [];
	    this.labels= [];
		val.forEach(item=>{
    
    
		  const value = item.split(':')[0];
		  const label= item.split(':')[1];
		  this.values.push(value);
		  this.labels.push(label);
		});
		console.log("this.values",this.values);
		console.log("this.labels",this.labels);
	  }
    }
  };
</script>

打印操作结果如下gif：

完美获取了el-checkbox中的value和label值，这里只是提供一种思路，肯定还有其他方法，小伙伴们慢慢研究。

在这里提一点：
在控制台打印的数组里面带有一个名称：Observer（观察者）；这里想表达的意思是在vue中当前的数据对象为响应式的，因为使用了v-model对当前的checkList进行了双向数据绑定，所以checkList为响应式的；而values和labels在data中进行了初始化，所以也是响应式的。建议大家去 vue的官方文档 详细阅读一下。
。