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。

相关推荐
Gracemark13 小时前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
天下无贼14 小时前
【手写组件】 Vue3 + Uniapp 手写一个高颜值日历组件(含跨月补全+今日高亮+选中状态)
前端·vue.js
洋葱头_15 小时前
vue3项目不支持低版本的android,如何做兼容
前端·vue.js
奔跑的蜗牛ing15 小时前
Vue3 + Element Plus 输入框省略号插件:零侵入式全局解决方案
vue.js·typescript·前端工程化
最后一个农民工18 小时前
vue3实现仿豆包模版式智能输入框
前端·vue.js
艾小码21 小时前
Vue组件到底怎么定义?全局注册和局部注册,我踩过的坑你别再踩了!
前端·javascript·vue.js
wusp199421 小时前
项目实战——“微商城”前后台【005】之前台项目首页编写
vue.js·vant·底部导航栏
森林的尽头是阳光1 天前
vue防抖节流,全局定义,使用
前端·javascript·vue.js
计算机毕业设计木哥1 天前
计算机毕设选题推荐:基于Java+SpringBoot物品租赁管理系统【源码+文档+调试】
java·vue.js·spring boot·mysql·spark·毕业设计·课程设计
zero13_小葵司1 天前
Vue 3 前端工程化规范
前端·javascript·vue.js