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。

相关推荐
晨枫阳9 小时前
前端VUE项目-day1
前端·javascript·vue.js
艾普阳科技11 小时前
解锁多对多关系设计:SnapDevelop助你轻松实现用户角色管理,效率提升100%!
vue.js
sunbyte11 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GithubProfies(GitHub 个人资料)
前端·javascript·css·vue.js·github·tailwindcss
Hijin11 小时前
快速搭建 Vite+vue3+TS+ESLint@9+Prettier+Husky@9+Commitlint 项目
前端·javascript·vue.js
无懈可击12 小时前
FormCreate低代码表单设计器 v3.3 版本发布,功能大更新!
vue.js·低代码·开源
独立开阀者_FwtCoder12 小时前
踩坑无数后,我终于总结出这份最全的 Vue3 组件通信实战指南
前端·javascript·vue.js
202613 小时前
12. npm version方法总结
前端·javascript·vue.js
用户876128290737413 小时前
mapboxgl中对popup弹窗添加事件
前端·vue.js
浩星14 小时前
vue3+uniapp 使用vue-plugin-hiprint中实现打印效果
前端·vue.js·uni-app
wocwin14 小时前
uniapp 微信小程序Vue3项目使用内置组件movable-area封装悬浮可拖拽按钮(拖拽结束时自动吸附到最近的屏幕边缘)
vue.js·微信小程序