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 小时前
antd x6 + vue3
开发语言·javascript·vue.js
栀秋6661 小时前
当我把 proto 打印出来那一刻,我懂了JS的原型链
前端·javascript
小离a_a1 小时前
flex垂直布局,容器间距相等
开发语言·javascript·ecmascript
Cassie燁2 小时前
element-plus源码解读1——useNamespace
前端·vue.js
ErMao2 小时前
TypeScript的泛型工具集合
前端·javascript
重铸码农荣光2 小时前
深入理解 JavaScript 原型链:从 Promise.all 到动态原型的实战探索
前端·javascript·promise
进击的野人2 小时前
深入理解 Async/Await:现代 JavaScript 异步编程的优雅解决方案
javascript·面试·ecmascript 6
PineappleCoder2 小时前
pnpm 凭啥吊打 npm/Yarn?前端包管理的 “硬链接魔法”,破解三大痛点
前端·javascript·前端工程化
CoolerWu3 小时前
TRAE SOLO实战成功展示&总结:一个所见即所得的笔记软体
前端·javascript
Cassie燁3 小时前
el-button源码解读1——为什么组件最外层套的是Vue内置组件Component
前端·vue.js