Vue+ElementUI开发记录（一）之获取el-select的label值

Vue+ElementUI开发记录（一）

---

前言

一、el-select组件通过change事件回调获取label值

今天我在联调接口的时候，想要获取下拉框组件的label值在另一个列表进行组合展示，可是我发现v-model绑定的值是下拉框的value值，也就是后端传来数组的id值，而不是标签名。怎么办呢？来看下列代码示例吧。

二、方法

1.示例代码

<template>
  <el-select @change="handleChange" v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="{value:item.value,label:item.label}">
    </el-option>
  </el-select>
</template>
 
<script>
  export default {
    data() {
      return {
        options: [{
          value: '选项1',
          label: '标签一'
        }, {
          value: '选项2',
          label: '标签二'
        }, {
          value: '选项3',
          label: '标签三'
        }, {
          value: '选项4',
          label: '标签四'
        }, {
          value: '选项5',
          label: '标签五'
        }]
      }
    },
    methods: {
       handleChange(params){
            const { value, label } = params;
		    // console.log(value, label)
		    // label就是我们想要的标签值
       }
    }
  }
</script>

2.额外要记录的知识点

:value 是 boolean 或 Number 或 变量

在这之前我一直以为只有变量才使用冒号，今天在绑定v-model的布尔值的时候vs报错了，才了解到我的value值要改成:value=true才能使用v-model.boolean进行绑定。但是v-model.number可以直接绑定不报错，不过可能不太规范。

---

总结

希望可以继续坚持~