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的官方文档 详细阅读一下。

  • 13
    点赞
  • 42
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值