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

花花鱼2024-08-16 16:44

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。