element-ul关于下拉框问题(默认值、动态赋值、动态传值)

1,485 阅读1分钟
 <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
                        }

效果:

image.png