渲染ElementUI中【el-select】下拉选择器中的数据

少少解释一下

 :key="item.userId"   
:label="item.userName"
:value="item.userName"
@change="handleChange"


  • key : 是保证你选中的值得唯一性,最好是设置成你数据源中的唯一值【否则会报错偶!】
  • label: 这个值是下拉选框显示的值,不设置就没有显示【你可以试一下】
  • value: 就是下拉选框选中的值,这个同时也是设置下拉选框默认值的重要参数!【比如我把下拉选框的默认值设置成“lvhanghmm”】

渲染ElementUI中【el-select】下拉选择器中的数据_开发者

报错!

渲染ElementUI中【el-select】下拉选择器中的数据_数据源_02

设置默认值

渲染ElementUI中【el-select】下拉选择器中的数据_开发者_03

渲染ElementUI中【el-select】下拉选择器中的数据_选择器_04

最终代码

<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>