elementUI中select组件value值注意事项有哪些-创新互联

这篇文章主要介绍elementUI中select组件value值注意事项有哪些，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

创新互联是专业的清苑网站建设公司，清苑接单;提供网站设计制作、网站制作,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行清苑网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

select组件的使用方式就不细说，可查看select组件使用方式

主要要说一下注意事项：

select组件可以动态生成option选项，option选项绑定对应的文本值和value值。

有时候我们发现 默认显示的内容会显示具体的value值而不是对应的文本，这种情况原因都是：

v-model绑定的值与option选项value值类型不符，

常规就是number与string

通用我们会循环一个数组、对象生成option选项

1.简单数组

const array1=[1,2,3]


  
  

此时 option 的value 是number 类型，v-model绑定的seletValue也必须是number类型

2.对象数组

const arrayOptions=[{key:0,text:'a'},{key:0,text:'b'},{key:0,text:'c'}}]


 
 

因为我们用item.key作为option的value，item.key 是json中的值，

此时 option的value是number类型，v-model绑定的seletValue也必须是number类型 例如 seletValue=1

3.对象

const options={0:'a',1:'b',2:'c',}


 
 

因为在json对象的 键:值 结构中，键的都是string类型，这里我们把json的键作为 option的value，

此时 option的value其实是string 类型，v-model绑定的seletValue也必须是string类型 例如 seletValue='1'

如果提交接口的数据要求是number怎么办，只需要在提交数据之前转换下Number(seletValue)就可以了

遇到这种情况可以参照上述情况检查代码调试

以上是“elementUI中select组件value值注意事项有哪些”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联成都网站设计公司行业资讯频道！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

网页标题：elementUI中select组件value值注意事项有哪些-创新互联
转载源于：http://6mz.cn/article/dooiii.html