vue elementUI select下拉框设置默认值(赋值)失败

news/2024/11/15 4:45:14/

vue elementUI select下拉框设置默认值

要为select下拉框设定默认值,只需要把 v-model 绑定的值和你想要选中 option 的 value 值设置一样即可。

下面上代码:

html部分代码:

<el-select v-model="valuetype"  @change="changetype"><el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>

script部分代码:

export default {data() {return {options: [{value: 'all',label: 0},{value: 'model',label: 1},{value: 'machine',label: 2}],valuetype: 0,};},}

所以把 v-model 绑定的 valuetype 设置为 和你想要选中 option 的 value 值设置一样,想要设置 “全部”那个选项,所以 设置成对应的value 为0。(注意:这里的0是数字类型,不是字符串)

在这里已经设置为 默认的为 全部 选项了。

 

关于element select框默认值赋值不成功问题,注意两点:

1、v-model里面的数据和遍历出来value值数据类型不一样。
(例:item.provinces类型是number,province类型是String。类型不一样导致赋值不成功)
2、遍历数据和赋值的先后顺序,必须保证数据先遍历后赋值。


http://www.ppmy.cn/news/39795.html

相关文章

前端中 try-catch 捕获不到哪些异常和常见错误

在开发过程中&#xff0c;我们的目标是 0error&#xff0c;0warning。 但有很多因素并不是我们可控的&#xff0c;为了避免某块代码的错误&#xff0c;影响到其他模块或者整体代码的运行&#xff0c;我们经常会使用try-catch模块来主动捕获一些异常或者错误。 比如我们在获取…

SpringBoot 使用Prometheus采集自定义指标数据

一、我们需要什么指标 对于DDD、TDD等&#xff0c;大家比较熟悉了&#xff0c;但是对于MDD可能就比较陌生了。MDD是Metrics-Driven Development的缩写&#xff0c;主张开发过程由指标驱动&#xff0c;通过实用指标来驱动快速、精确和细粒度的软件迭代。MDD可使所有可以测量的东…

ChatGPT 与未来软件开发的关系

在过去几年中&#xff0c;自然语言处理 (NLP) 取得了重大进展&#xff0c;并为软件开发开辟了新的可能性。最令人印象深刻的 NLP 应用之一是聊天机器人的开发&#xff0c;它能够通过自然语言与用户交流。ChatGPT 就是这样一种聊天机器人&#xff0c;这是一种由 OpenAI 开发的大…

《扬帆优配》国际原油市场巨震 海外金融稳定性再遭考验

当地时间4月2日&#xff0c;以沙特为代表的“欧佩克”&#xff08;下称OPEC&#xff09;突然宣告&#xff0c;在上一年10月减产200万桶/日的基础上&#xff0c;进一步自愿减产原油超160万桶/日。至此&#xff0c;OPEC计划减产规模将达全球石油产值的约3.5%。 投资者更关怀的是&…

TCP 的可靠传输

目录可靠传输有啥用确认应答超时重传总结可靠传输有啥用 我们知道相比于 UDP, TCP 的传输是可靠的, 啥意思呢? 就是 UDP 发送的数据, 它自己不知道发送的数据对方是否接收到. 而 TCP 发送的数据, 它知道对方是否接收到, 也就是说对方会给个应答. 假设一个场景 : 甲要付款给乙…

Scratch游戏“刀光剑影”游戏介绍

这是一个 Scratch 打怪 闯关 2d 的游戏。 资源下载网址&#xff1a; https://download.csdn.net/download/leyang0910/87651781 士兵简介&#xff1a; 剑兵 &#xff1a;4滴血&#xff0c;可以挥剑杀敌盾兵 &#xff1a;8滴血&#xff0c;盾牌可以防御或者怼人飞刀兵 &…

JAVA-8-[SpringBoot]入门程序案例和原理分析

Spring Boot框架入门教程&#xff08;快速学习版&#xff09; Spring Boot教程BooTWiki.COM 1 Spring Boot Spring Boot是Pivotal(关键性的)团队在Spring的基础上提供的一套全新的开源框架&#xff0c;其目的是为了简化Spring应用的搭建和开发过程。Spring Boot去除了大量的X…

List中常见的方法和五种遍历方式

目录 List集合的特点 List集合的遍历方式 五种遍历方式对比 List集合的特点 有序&#xff1a;存和取的元素顺序一致有索引&#xff1a;可以通过索引操作元素可重复&#xff1a;存储的元素可以重复Collection的方法List都继承了&#xff1b;List集合因为有索引&#xff0c;所…