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

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

html 复制代码
      <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-option
                v-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-option
                v-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,这样可以直接去验证市区,而省份的话选择了,才会联动出市区的数据,用户才能选择市区,以此类推就可以实现上面的三级都验证不为空的问题。

相关推荐
夜宵饽饽1 天前
上下文工程实践 - 工具管理(上篇)
javascript·后端
汤姆Tom1 天前
JavaScript Proxy 对象详解与应用
前端·javascript
BillKu1 天前
Vue3中app.mount(“#app“)应用挂载原理解析
javascript·vue.js·css3
xiaopengbc1 天前
在 React 中如何使用 useMemo 和 useCallback 优化性能?
前端·javascript·react.js
GISer_Jing1 天前
React 18 过渡更新:并发渲染的艺术
前端·javascript·react.js
码上暴富1 天前
Echarts雷达图根据数值确定颜色
前端·javascript·echarts
Mintopia1 天前
在混沌宇宙中捕捉错误的光——Next.js 全栈 Sentry / LogRocket
前端·javascript·next.js
Mintopia1 天前
长文本 AIGC:Web 端大篇幅内容生成的技术优化策略
前端·javascript·aigc
VueVirtuoso1 天前
SaaS 建站从 0 到 1 教程:Vue 动态域名 + 后端子域名管理 + Nginx 配置
前端·vue.js·nginx
祈祷苍天赐我java之术1 天前
Vue 整体框架全面解析
前端·javascript·vue.js