少少解释一下
:key="item.userId"
:label="item.userName"
:value="item.userName"
@change="handleChange"
- key : 是保证你选中的值得唯一性,最好是设置成你数据源中的唯一值【否则会报错偶!】
- label: 这个值是下拉选框显示的值,不设置就没有显示【你可以试一下】
- value: 就是下拉选框选中的值,这个同时也是设置下拉选框默认值的重要参数!【比如我把下拉选框的默认值设置成“lvhanghmm”】
报错!
设置默认值
最终代码
<template>
<div id="container">
<el-card>
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.userId"
:label="item.userName"
:value="item.userName"
@change="handleChange"
>
</el-option>
</el-select>
</el-card>
</div>
</template>
<script>
import { selectData } from "./selectData";
export default {
created() {
console.log(123);
},
data() {
return {
options: selectData,
value: "",
};
},
methods: {
handleChange(val) {
console.log(val);
},
},
};
</script>
<style scoped>
</style>