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。

相关推荐
GDAL11 分钟前
为什么Cesium不使用vue或者react,而是 保留 Knockout
前端·vue.js·react.js
芜青26 分钟前
【Vue2手录11】Vue脚手架(@vue_cli)详解(环境搭建+项目开发示例)
前端·javascript·vue.js
麦麦大数据1 小时前
J002 Vue+SpringBoot电影推荐可视化系统|双协同过滤推荐算法评论情感分析spark数据分析|配套文档1.34万字
vue.js·spring boot·数据分析·spark·可视化·推荐算法
BillKu6 小时前
Vue3 + Element-Plus 抽屉关闭按钮居中
前端·javascript·vue.js
给月亮点灯|12 小时前
Vue基础知识-Vue集成 Element UI全量引入与按需引入
前端·javascript·vue.js
知识分享小能手12 小时前
React学习教程,从入门到精通,React 组件生命周期详解(适用于 React 16.3+,推荐函数组件 + Hooks)(17)
前端·javascript·vue.js·学习·react.js·前端框架·vue3
wow_DG13 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(二):虚拟 DOM 与 Diff 算法
开发语言·javascript·vue.js·算法·前端框架
Hexene...14 小时前
【前端Vue】el-dialog关闭后黑色遮罩依然存在如何解决?
前端·javascript·vue.js·elementui·前端框架
Jay_See14 小时前
JC链客云——项目过程中获得的知识、遇到的问题及解决
前端·javascript·vue.js
叫我詹躲躲15 小时前
偷偷收藏!前端老鸟绝不外传的150个JS插件,让你效率翻3倍…
前端·vue.js