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

相关推荐
华科云商xiao徐1 小时前
Java并发编程常见“坑”与填坑指南
javascript·数据库·爬虫
举个栗子dhy1 小时前
解决在父元素上同时使用 onMouseEnter和 onMouseLeave时导致下拉菜单无法正常展开或者提前收起问题
前端·javascript·react.js
前端与小赵1 小时前
vue3和vue2生命周期的区别
前端·javascript·vue.js
一鹿有你们~1 小时前
面试题-前端如何解决跨域
前端·javascript·跨域
Sailing1 小时前
👉 👉 Vue3 自定义 Hook:从入门到进阶(~~安静的阅读2分钟,相信我,这篇文章一定能给你启发)
前端·javascript·vue.js
aol1212 小时前
X6官方示例「数据加工DAG图」转为Vue版
前端·vue.js
一枚前端小能手2 小时前
🚀 主线程卡死用户要骂娘?Web Worker让你的应用丝滑如德芙
前端·javascript
小桥风满袖2 小时前
极简三分钟ES6 - Promise
前端·javascript
小高0072 小时前
性能优化零成本:只加3行代码,FCP从1.8s砍到1.2s
前端·javascript·面试