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。