vue3 antdv3 Select选择项有时候出现数字,不是标签,如果没有值的时候,不会清空原来的值的解决

1、先上个图:

这个是官网的例子,点了前面的Select,会自动查询并列出后面的城市Select

Ant Design Vue --- An enterprise-class UI components based on Ant Design and Vue.js

2、然后我们在使用中总会出现各种问题,比如说选择了以后出现了一个数字(value),我们要的是label值的显示,这里面一并的问题是出在值类型的问题上。

比如 :

{label:'Zhejiang',value:0},{label:'Jiangshu',value:1}

复制代码
 <Select
              v-model:value="provinceid"
              style="width: 150px"
              placeholder="请选择"
              @change="onProvinceChange"
              :options="ProvinceOptions"
              size="small"
            />
 <Select
              v-model:value="cityid"
              style="width: 150px"
              placeholder="请选择"
              @change="onCityChange"
              :options="CityOptions"
              size="small"
            />

这里面的provinceid,我们也要一致的类型:不能用String类型的,否则会出现上面的问题。

如果我们的value值是Integer的,那么我们在v-model:value中绑定的值也是要值 Integer。

3、那么如果这个Province下面没有City的情况,还是会显示原来选择值 ,我们要如何处理呢?

这里我们的cityid可以赋值为undefined就可以了。

这里的定义:cityid: number | any;否则还是会显示出一个红色下划线的。

4、总结一下:在使用Select的时候,一定要记住,value与v-model:value的类型要一致。不存在的时候,只要赋值undefined。

相关推荐
paopaokaka_luck11 小时前
基于SpringBoot+Vue的社区诊所管理系统(AI问答、webSocket实时聊天、Echarts图形化分析)
vue.js·人工智能·spring boot·后端·websocket
余道各努力,千里自同风11 小时前
el-input 输入框宽度自适应宽度
javascript·vue.js·elementui
Southern Wind12 小时前
Vue 3 多实例 + 缓存复用:理念及实践
前端·javascript·vue.js·缓存·html
一大树12 小时前
Vue3优化指南:少写代码,多提性能
vue.js
90后的晨仔12 小时前
Webpack完全指南:从零到一彻底掌握前端构建工具
前端·vue.js
90后的晨仔12 小时前
Vue3项目全面部署指南:从构建到上线
前端·vue.js
重生之我要当java大帝12 小时前
java微服务-尚医通-数据字典-5
vue.js·微服务·云原生·架构
Shi_haoliu13 小时前
Vue2 + Office Add-in关于用vue项目于加载项控制excel单元格内容(Demo版)
前端·javascript·vue.js·node.js·html·excel·office
计算机毕业设计木哥13 小时前
计算机毕业设计选题推荐:基于SpringBoot和Vue的爱心公益网站
java·开发语言·vue.js·spring boot·后端·课程设计
知识分享小能手19 小时前
uni-app 入门学习教程,从入门到精通,uni-app基础扩展 —— 详细知识点与案例(3)
vue.js·学习·ui·微信小程序·小程序·uni-app·编程