欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 文旅 > 游戏 > vue3中省市区联动在同一个el-form-item中咋么设置rules验证都不为空的效果

vue3中省市区联动在同一个el-form-item中咋么设置rules验证都不为空的效果

2024/10/24 15:25:05 来源:https://blog.csdn.net/weixin_38225763/article/details/140038833  浏览:    关键词:vue3中省市区联动在同一个el-form-item中咋么设置rules验证都不为空的效果

在开发中出现如下情况,在同一个el-form-item设置了省市区三级联动的效果

      <el-form-item label="地区" prop="extraProperties.Province"><el-row :gutter="20"><el-col :span="12"><el-select v-model="InformationForm.extraProperties.Province" placeholder="请选择省份" :disabled="readOnly" style="width: 240px" @change="provinceChange"><el-optionv-for="item in provinceOptions":key="item.text":label="item.value":value="item.text"/></el-select></el-col><el-col :span="12"><el-select v-model="InformationForm.extraProperties.City" placeholder="请选择市/区" style="width: 240px" :disabled="readOnly" ><el-optionv-for="item in cityOptions":key="item.text":label="item.value":value="item.text"/></el-select></el-col></el-row></el-form-item>

如上设置的prop是extraProperties.Province,导致验证时只要省份选择了就不验证市区了,

那咋么办,其实可以把prop直接设置成extraProperties.City,这样可以直接去验证市区,而省份的话选择了,才会联动出市区的数据,用户才能选择市区,以此类推就可以实现上面的三级都验证不为空的问题。

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com