企业网站建设发展平台,淘宝客做网站好还是建群号,网页设计图片位置代码,海外营销公司情景问题#xff1a;新增表单有时间区域选择#xff0c;选择了时间#xff0c;还是提示必填的校验提示语#xff0c;且修改时#xff0c;通过 号赋值法#xff0c;重新选择此时间范围无效。
解决方法#xff1a;#xff08;重点#xff09; widthHoldTime:[]#xf…情景问题新增表单有时间区域选择选择了时间还是提示必填的校验提示语且修改时通过 号赋值法重新选择此时间范围无效。
解决方法重点 widthHoldTime:[]要定义到deal_form对象里面。不要拿出来单独定义。入参时不需要 可以通过delete 方法删除。 修改时要通过this.$set()赋值。 html
el-form refdealForm :modeldeal_form :rulesdeal_form_rules label-width130pxel-form-item label合同开始-终止时间 propwidthHoldTimeel-date-picker v-modeldeal_form.widthHoldTime value-formatyyyy-MM-dd typedaterangerange-separator- start-placeholder开始日期 end-placeholder结束日期 :clearablefalse //el-form-item
/el-form
js
scriptexport default {data() {return {deal_form_rules: {// 手机号校验agentPhone: [{required: true,message: 请输入代办人电话,trigger: blur}, {required: true,pattern: /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/,message: 请输入正确的手机号码,trigger: blur,}],// 生效起始时间-终止时间时间范围校验widthHoldTime: [{required: true,message: 请选择合同开始-终止时间,trigger: blur}],}}},methods: {// 新增open_add() {this.deal_obj.open truethis.deal_obj.title 新增this.deal_form {agentPhone: null, //手机号startTime: null, // 起始时间endTime: null, //终止时间widthHoldTime: [] //起始时间 - 终止时间* 注意此数据要放到 deal_form form表格字段里面不然无法校验即校验规则无法生效};this.$nextTick(() {this.$refs[dealForm].resetFields();})},// 修改 - 查询修改信息并赋值到 el-form 表格中edit_withhold(row) {getWidthhold(row.contractId).then(res {if (res.code 200) {this.$nextTick(() {if (this.$refs[dealForm]) this.$refs[dealForm].resetFields();})this.deal_obj.title 修改this.deal_form res.data;this.$set(this.deal_form, widthHoldTime, [res.data.startTime, res.data.endTime]) // * 注意要用 $set 方法赋值才可修改。不然只能展示无法重新选择/更新值。this.deal_obj.open true} else {this._err(res.msg)}});},// 新增/修改 - 提交submit_dealForm() {this.$refs[dealForm].validate(valid {if (valid) {// 将 widthHoldTime 时间区域的值赋值给传入后端的 起始、终止startTimeendTime两个子弹中并删除入参中多余的 widthHoldTime 字段let params {}Object.assign(params, this.deal_form);[params.startTime, params.endTime] params.widthHoldTime;delete params.widthHoldTime// 调用接口提交if (this.deal_obj.title 修改) {// 调用修改接口,do something} else {// 调用新增接口,do something}}});},}}
/script
