Vue——el-option下拉框绑定

Vue——el-option下拉框绑定
https://blog.csdn.net/wx19900503/article/details/109268480

1、正常使用v-for 进行遍历 下拉框内容，如果需要增加一个自定义的值，则加一个el-option

el-option用法：

在日常使用el-select 中，新增一条option 如果value对应到值是string则 不影响前端显示

<el-option key="6" label="苏州大闸蟹" value="6" />

 遇到下拉框不显示label值,如果绑定的vaule 是number，则需要前面加上： 不然会匹配不到，String不加:没问题

具体v-bind 用法：https://cn.vuejs.org/v2/api/#v-bind

<el-option key="6" label="苏州大闸蟹" :value="6" />

demo如下：

<template>
  <div>
    <el-button @click="printSelect">调试</el-button>
    //value1 的类型 需要跟:value="item.value" 一样
    <el-select ref="selectValue1" v-model="value1" filterable placeholder="请选择">
      <el-option
        v-for="item in options1"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
      //vaule1 为string 则 value="选项6" 前面可以不用加：即v-bind 数据绑定
      <el-option key="选项6" label="扬州炒饭" value="选项6" />
    </el-select>
    <el-select ref="selectValue2" v-model="value2" no-match-text filterable placeholder="请选择">
      //value2为number 前面需要：
      <el-option key="5" label="扬州炒饭" :value="5" />
      <el-option key="6" label="苏州大闸蟹" :value="6" />
    </el-select>
  </div>
</template>

js如下：printSelect方法 测试 页面显示 和 选中之后 数据类型 和值

<script>
export default {
  data() {
    return {
      options1: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value1: '选项1',
      value2: ''
    }
  },
  created() {
    //修改value1 value2 值，查看页面是否匹配到label
    this.getValue()
  },
  methods: {
    printSelect: function() {
        //打印选中到 类型 值 和label值
      console.log(typeof this.value1 + '-' + this.value1 + '-' + this.$refs.selectValue1.selected.label)
      console.log(typeof this.value2 + '-' + this.value2 + '-' + this.$refs.selectValue2.selected.label)
    },
    getValue: function() {
      this.value1 = '选项2'
      this.value2 = 5
    }
  }
}
</script>

2、测试页面显示如下：

第二个下拉框如果改成

<el-option key="5" label="扬州炒饭" value="5" />

则label显示不了label值