<div class='edit-name'>
<div class='edit-title'>卖车意向度:</div>
<el-select v-model="vehicleValues" placeholder="请选择卖车意向度" @change='newOpenOption'>
<el-option v-for="item in vehicleData" :label="item.name" :key="item.value" :value="item.value" ></el-option>
</el-select>
element-ui对下拉框需要设定一个动态对key值、value值
el-select列表中v-model是默认显示的值、@change(方法)是传递的动态value值
el-option使用v-for循环对自定义数据进行循环,实现动态对key值和vlue值的分离
model中的vehicleValues是默认显示对值,也就是表格内的值。而change中的值是对后台的传值value
el-option中的数组vehicleData在data中声明:
vehicleData: [{
name: '未选择',
value: null
}, {
name: '我想尽快卖车',
value: "1"
}, {
name: '价格合适我就卖',
value: "2"
}, {
name: '想先问一下我的车卖的话多少钱',
value: "3"
}]
el-option中的
label是显示的值和vehicleValues对等,把动态的key值和value值分开
对后台的数值进行判断,并赋值给el-select的默认
this.vehicle = vehicle
switch (vehicle) {
case null:
this.vehicleValues = '未选择'
break
case 1:
this.vehicleValues = '我想尽快卖车'
break
case 2:
this.vehicleValues = '价格合适就卖'
break
case 3:
this.vehicleValues = '想先问下我这车卖的话能卖多少钱'
break
}
效果: