同时获取el-select的value和label并回显

通过ref获取

<el-select ref="SelectRef" @change="changeSelect">
    <el-option v-for="item in testArr" :key="item.code" :label="item.name" :value="item.code"></el-option>
</el-select>

changeSelect () {
    this.$nextTick(() => {
        let val= this.$refs.SelectRef.selected
        this.purchasedata.sdName = val.label

         this.purchasedata.sdCode = val.value
    })
}

必须在this.$nextTick()中执行

 原因:得等refs真正获取到dom和对应的label和value,否则会出现拿不到值的情况。

回显

因为只绑定了value和label,只要页面刷新时再获取一次testArr,就可以回显。

  • 6
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
el-selectElement UI 提供的下拉选择器组件,本身并不支持上传图片并回显图片的功能。你可能需要结合其他 Element UI 组件,如 el-upload 和 el-image,来实现这个功能。 以下是一个示例代码,可以实现在 el-select 中选择图片上传,并在下拉框中回显图片: ```html <template> <el-select v-model="selectedImg" placeholder="Select image"> <el-option v-for="(img, index) in images" :key="index" :label="img.name" :value="img.url"> <el-image :src="img.url" :fit="fit" /> </el-option> <el-option> <el-upload class="upload-demo" :action="uploadUrl" :show-file-list="false" :on-success="handleSuccess" > <el-button size="small" type="primary">Click to upload</el-button> </el-upload> </el-option> </el-select> </template> <script> export default { data() { return { images: [ { name: 'Image 1', url: 'https://via.placeholder.com/150' }, { name: 'Image 2', url: 'https://via.placeholder.com/150' }, { name: 'Image 3', url: 'https://via.placeholder.com/150' }, ], selectedImg: '', fit: 'cover', uploadUrl: '/api/upload', // replace with your own upload API URL }; }, methods: { handleSuccess(res) { this.images.push({ name: res.name, url: res.url }); }, }, }; </script> ``` 这个示例中,我们使用 el-option 组件来展示图片,并在其中嵌入 el-image 组件来显示图片。同时,在最后一个 el-option 中,我们使用 el-upload 组件来实现上传图片功能。上传成功后,会调用 handleSuccess 方法将新上传的图片信息添加到 images 数组中,从而实现图片的动态更新。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

爱吃罗非鱼

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值