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

相关推荐
Penge6663 小时前
《Go 后端开发者学 TypeScript:数组和元组》
javascript
Penge6664 小时前
《Go 后端开发者学 TypeScript:export关键字大全》
javascript
Penge6664 小时前
《Go 后端开发者学 TypeScript:从零理解 async、await 与 Promise》
javascript
Penge6664 小时前
typescript 中const用法
javascript
usdoc文档预览11 小时前
USDOC系列之PPT文件在线编辑-VUE前端实现在线浏览器在线编辑PPT文档
前端·vue.js·编辑器·office365·ppt在线编辑·office文件在线编辑·文件在线编辑
Java小卷11 小时前
面向 schema 编程,轻松搞定 Element 虚拟化表格复杂应用场景
vue.js·低代码·element
仨孩子的爹13 小时前
Lodop、hiprint 与 vue-print-designer:打印控件选型对比
vue.js
程序员大阳15 小时前
HTML+CSS+JS对话式实战(3)-活动管理页实现查询、新增、删除API后端接口
javascript·css·html·实战·删除·查询·新增
炫酷的大高个15 小时前
6 亿播放的闪身步,我用前端算出 15 倍重心差
前端·javascript
林小帅16 小时前
【笔记】Prisma v7 + SQLite TS2305 及连锁 TS7006 问题
前端·javascript·后端