Vue之el-option下拉框绑定问题
作者：tellmewsm
el-option下拉框绑定问题
1、正常使用v-for进行遍历下拉框内容
如果需要增加一个自定义的值，则加一个el-option
el-option用法：
参数 | 说明 | 类型 | 可选值 | 默认值 |
value | 选项的值 | string/number/object | — | — |
label | 选项的标签，若不设置则默认与 value 相同 | string/number | — | — |
disabled | 是否禁用该选项 | boolean | — | false |
在日常使用el-select 中，新增一条option 如果value对应到值是string则 不影响前端显示
<el-option key="6" label="苏州大闸蟹" value="6" />
遇到下拉框不显示label值,如果绑定的vaule 是number，则需要前面加上： 不然会匹配不到，String不加:没问题
具体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值
如何在el-option中绑定事件
我想实现这样一个功能，我从后台获取到一组数组，想把它放到el-select下拉框当中，然后在每点击一个el-option选项时，完成一次页面的跳转，因此在我的每一个el-option当中，不只是有value和key这两个属性，还带着一些关于跳转的字段信息。
我的目的就是点击下拉框的a页面，然后它给我跳转到’/a’，第一反应肯定就是在el-option当中添加一个点击事件，但结果不尽人意，后来才发现el-option是不能触发事件的。只能在el-select添加一个change事件，change事件的确可以触发，但只能获取到一个数据，就是model绑定的那个值（也就是name属性），那这就很恼火了，我的path怎么去获取呢？
方案
我的解决方法比较粗暴，直接在el-option里面加上一个span元素，由于它在el-option里面，因此可以继承到item，这时只要在span元素写上{{item.name}}，然后设置为行级块元素并填充满整个el-option，并给它添加一个点击事件@click=hancleClick(item)，over！！
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。