<template>
<!-- 需求:使用 <el-select> + <el-option> 关于下拉选择 前端显示中文，传值为对应格式value -->
<div class="demo">
<!-- 新增部分 -->
<el-select placeholder="请选择系统" v-model="newOption" @change="newOpenOption">
<el-option v-for="item in optionData" :label="item.name" :key="item.value" :value="item.value"></el-option> <!-- 重要 value 里面赋值很重要，如果这里赋值成 item.name 那么打印出来就是name的值，传给后台的值也是name,所以要搞清楚后台需要什么类型的值 -->
</el-select>
<!-- 修改部分 -->
<el-select placeholder="请选择系统" v-model="editOption" @change="editOpenOption">
<el-option v-for="item in optionData" :label="item.name" :key="item.value" :value="item.value"></el-option> <!-- 重要 value 里面赋值很重要，如果这里赋值成 item.name 那么打印出来就是name的值，传给后台的值也是name,所以要搞清楚后台需要什么类型的值 -->
</el-select> </div>
</template>
<script>
export default {
name: 'demo',
data() {
return {
newOption:'',
editOption:'',
optionData: [{
name: '系统',
value: "sys"
}, {
name: '前端',
value: "web"
}, {
name: '安卓',
value: "android"
}, {
name: '苹果',
value: "ios"
}]
}
},
created() {
this.editOption = 'ios' // 修改部分后台返回的值,需要将后台的值回显在前端页面 后台必须返回这种格式！！！
},
methods: {
newOpenOption(v) {
console.log(v) // 这里打印出来的值跟 value里面绑定的相关， 我这里value绑定的是item.value,所以打印出来的是 sys或web
},
editOpenOption(v) {
console.log(v)
}
}
} </script>
<style scoped> </style>