尧图网络科技 Logo 尧图网络科技
  • 首页
  • 关于我们
  • 建站服务
  • UI 设计
  • 案例展示
  • SEO 优化
  • 资讯中心
  • 联系我们

资讯详情

深度解读 · 专业分析

  • 首页
  • 资讯中心
  • /
  • VUE中表达校验-明明有值却还是出现非空提示

最新资讯

  • 全部资讯
  • 行业动态
  • UI 设计
  • SEO 优化
  • 网站开发

VUE中表达校验-明明有值却还是出现非空提示

📅 发布时间:2026/9/17 12:43:25 👁 浏览次数:
VUE中表达校验-明明有值却还是出现非空提示

VUE中表达校验-明明有值却还是出现非空提示

1 说明

  对原先的一个表单编辑功能进行修改,有两个选择框从非必填变为必填。

  修改完成后,去编辑的时候有时候就会出问题,明明选择了值,却还是出现非空提示

 

2 代码

  其中,机构部门和是否是负责人从非必填变为必填了

 <el-dialog :title="dialogTitle" :visible.sync="dialogAddVisible" width="600px" @close="reset"><el-form :model="tableForm"  ref="tableForm" :rules="tableRules"  label-width="160px"><el-form-item label="名称" prop="positionname" ><el-input v-model="tableForm.positionname" style="width:90%"></el-input></el-form-item><el-form-item label="本级排序" prop="sortno" ><el-input v-model="tableForm.sortno" style="width:90%"></el-input></el-form-item><el-form-item label="机构部门" prop="orgidseq" ><el-cascader :options="orgnizationlist"   v-model="tableForm.orgidseq" :show-all-levels="false" style="width:90%"></el-cascader></el-form-item><el-form-item label="上级岗位" prop="parentId" ><el-select v-model="tableForm.parentId" clearable filterable placeholder="请选择" style="width:90%"><el-optionv-for="item in keyList":key="item.value":label="item.name":value="item.value"></el-option></el-select></el-form-item><el-form-item label="是否是负责人" prop="feild2" ><dx-select codeType="boolean"  v-model="tableForm.feild2" clearable style="width:90%"></dx-select></el-form-item><el-form-item label="备注" prop="remark"><el-input v-model="tableForm.remark" style="width:90%"></el-input></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button type="primary"  @click="saveAddForm">确 定</el-button><el-button @click="reset">取 消</el-button></div></el-dialog>

校验规则

         tableRules:{positionname:[{required: true, message: '请输入'}],sortno:[{required: true, message: '请输入'}],orgidseq:[{required: true, message: '请选择', trigger: 'change'}],feild2:[{required: true, message: '请选择', trigger: 'change'}],},

 

3 问题

  不明白为什么,整了半天,各种尝试,最后终于好了

  
1)原先的赋值代码
  点击编辑的时候去赋值回显表单
  feild2 和 orgidseq 如果为空字符串或者空数组的话就会有问题
edit(row){this.tableForm = {} // 设为空this.dialogAddVisible = truethis.dialogTitle = '编辑'this.tableForm.id = row.idthis.tableForm.positionname = row.positionnamethis.tableForm.sortno = row.sortnothis.tableForm.parentId = row.parentIdthis.tableForm.remark = row.remarkthis.tableForm.feild2 = row.feild2
this.tableForm.orgidseq = row.orgidseqconsole.log('编辑this.tableForm',this.tableForm)},

 

  2)修改后

feild2 和 orgidseq存在值才赋值
edit(row){this.tableForm = {}this.dialogAddVisible = truethis.dialogTitle = '编辑'this.tableForm.id = row.idthis.tableForm.positionname = row.positionnamethis.tableForm.sortno = row.sortnothis.tableForm.parentId = row.parentIdthis.tableForm.remark = row.remarkif(row.feild2){this.tableForm.feild2 = row.feild2}if(row.orgidseq){this.tableForm.orgidseq = row.orgidseq}console.log('编辑this.tableForm',this.tableForm)},

 

 

相关新闻

Oracle统计信息相关

Oracle统计信息相关

2026/9/14 6:14:31 查看详情
Consul 与 Prometheus 集成实战:服务自动发现与监控配置指南(含 ThinkPHP8 示例)

Consul 与 Prometheus 集成实战:服务自动发现与监控配置指南(含 ThinkPHP8 示例)

2026/9/14 23:55:24 查看详情
完整教程:笔记本键盘失灵别慌!3种方法快速禁用(附恢复技巧)

完整教程:笔记本键盘失灵别慌!3种方法快速禁用(附恢复技巧)

2026/9/11 0:57:22 查看详情
Perfetto GPU 追踪完全指南:从 Android 移动图形到多 GPU 高性能计算

Perfetto GPU 追踪完全指南:从 Android 移动图形到多 GPU 高性能计算

2026/9/17 12:43:09 查看详情
gogcli `gog docs headings list` 命令实战:在终端中提取 Google Docs 标题层级结构

gogcli `gog docs headings list` 命令实战:在终端中提取 Google Docs 标题层级结构

2026/9/17 12:43:09 查看详情
RIOT OS 板级支持解析:Microduino CoreRF(ATmega128RFA1)从引脚映射到烧录调试全指南

RIOT OS 板级支持解析:Microduino CoreRF(ATmega128RFA1)从引脚映射到烧录调试全指南

2026/9/17 12:43:09 查看详情
半主动悬架控制全流程:从1/4车建模到LQR与Simulink仿真

半主动悬架控制全流程:从1/4车建模到LQR与Simulink仿真

2026/9/17 12:42:38 查看详情
GPT Images 2.5:跨模态语义理解与对象级图像编辑技术解析

GPT Images 2.5:跨模态语义理解与对象级图像编辑技术解析

2026/9/17 12:42:38 查看详情
DataHub UI 无代码元数据摄取实战指南:从权限配置、定时同步到故障排查

DataHub UI 无代码元数据摄取实战指南:从权限配置、定时同步到故障排查

2026/9/17 12:42:38 查看详情
Perfetto GPU 追踪完全指南:从 Android 移动图形到多 GPU 高性能计算

Perfetto GPU 追踪完全指南:从 Android 移动图形到多 GPU 高性能计算

2026/9/17 12:43:09 查看详情
gogcli `gog docs headings list` 命令实战:在终端中提取 Google Docs 标题层级结构

gogcli `gog docs headings list` 命令实战:在终端中提取 Google Docs 标题层级结构

2026/9/17 12:43:09 查看详情
RIOT OS 板级支持解析:Microduino CoreRF(ATmega128RFA1)从引脚映射到烧录调试全指南

RIOT OS 板级支持解析:Microduino CoreRF(ATmega128RFA1)从引脚映射到烧录调试全指南

2026/9/17 12:43:09 查看详情
半主动悬架控制全流程:从1/4车建模到LQR与Simulink仿真

半主动悬架控制全流程:从1/4车建模到LQR与Simulink仿真

2026/9/17 12:42:38 查看详情
GPT Images 2.5:跨模态语义理解与对象级图像编辑技术解析

GPT Images 2.5:跨模态语义理解与对象级图像编辑技术解析

2026/9/17 12:42:38 查看详情
DataHub UI 无代码元数据摄取实战指南:从权限配置、定时同步到故障排查

DataHub UI 无代码元数据摄取实战指南:从权限配置、定时同步到故障排查

2026/9/17 12:42:38 查看详情
RS-485远距离通信稳定性解决方案:ISO1452与R7KA8D2KFLCAC隔离组合设计

RS-485远距离通信稳定性解决方案:ISO1452与R7KA8D2KFLCAC隔离组合设计

2026/9/17 0:00:02 查看详情
MATLAB手写紧束缚模型计算石墨烯能带结构

MATLAB手写紧束缚模型计算石墨烯能带结构

2026/9/17 0:00:33 查看详情
VHawk-Lint实战:FPGA静态代码检查如何补齐仿真验证的盲区

VHawk-Lint实战:FPGA静态代码检查如何补齐仿真验证的盲区

2026/9/17 0:00:33 查看详情
Refine v5 Ant Design NumberField 组件实战:基于 Intl 的本地化数字格式化

Refine v5 Ant Design NumberField 组件实战:基于 Intl 的本地化数字格式化

2026/9/16 17:14:07 查看详情
拯救者Y7000黑屏故障排查与维修实战指南

拯救者Y7000黑屏故障排查与维修实战指南

2026/9/17 1:50:22 查看详情
在线答疑系统Java毕设实战:Spring Boot前后端分离与状态流转

在线答疑系统Java毕设实战:Spring Boot前后端分离与状态流转

2026/9/16 12:03:06 查看详情
雨花区哪家财务公司代理记账比较好?

雨花区哪家财务公司代理记账比较好?

2026/9/16 11:47:44 查看详情
从零到一构建开源项目的完整历程:交付前的最后检查怎么做

从零到一构建开源项目的完整历程:交付前的最后检查怎么做

2026/9/16 13:23:33 查看详情
日志平台 日志分析平台与全链路追踪:交付前的最后检查怎么做

日志平台 日志分析平台与全链路追踪:交付前的最后检查怎么做

2026/9/16 9:41:22 查看详情

关于尧图

立足北京本地的一站式网站建设服务与设计教学平台,深耕企业网站定制开发、全网 SEO 优化及网络推广服务。

快速链接

  • 关于我们
  • 建站服务
  • 案例展示
  • 资讯中心

服务项目

  • 企业官网定制
  • UI 界面设计
  • SEO 优化推广
  • 移动端适配

联系方式

电话:400-XXX-XXXX

邮箱:info@zskr.cn

地址:北京市朝阳区 XXX 路 XX 号

© 2026 尧图网络科技 版权所有 | 京 ICP 备 XXXXXXXX 号