el-form-item 动态绑定 prop

最新推荐文章于 2024-08-23 17:12:15 发布

qq_46302247

最新推荐文章于 2024-08-23 17:12:15 发布

阅读量1.8k

点赞数

分类专栏： js 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_46302247/article/details/129421804

版权

js 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

需求一：
在这里插入图片描述

 <el-form-item label="证件有效期：" prop="CertValType">
   <el-radio-group v-model="RealNameAuthForm.CertValType" @input="radioChange('cert')">
     <el-radio label="short">短期</el-radio>
     <el-radio label="long">长期</el-radio>
   </el-radio-group>
 </el-form-item>
 <el-form-item :prop="RealNameAuthForm.CertValType==='short'?'shortTime':'longTime'">
   <el-date-picker
     v-show="RealNameAuthForm.CertValType==='short'"
     value-format="yyyy-MM-dd"
     v-model="RealNameAuthForm.shortTime"
     type="daterange"
     range-separator="至"
     start-placeholder="开始日期"
     end-placeholder="结束日期">
   </el-date-picker>
   <el-date-picker
     v-show="RealNameAuthForm.CertValType==='long'"
     value-format="yyyy-MM-dd"
     v-model="RealNameAuthForm.longTime"
     type="date"
     placeholder="开始日期">
   </el-date-picker>
 </el-form-item>

RealNameAuthForm: {
  CertValType: 'short',//证件有效期
  shortTime: '',
  longTime: '',
},
realNameAuthRules: {
  CertValType: [{ required: true, message: '请选择证件有效期', trigger: 'blur' }],
  shortTime: [{ required: true, message: '请选择证件有效期', trigger: 'change' }],
  longTime: [{ required: true, message: '请选择证件有效期', trigger: 'change' }],
},

 radioChange(val) {
   if(val==='busi') {
     // 营业期限置空
     this.businessForm.shortTime = ''
     this.businessForm.longTime = ''
     return
   }

   if(val==='cert') {
     // 证件有效期置空
     this.RealNameAuthForm.shortTime = ''
     this.RealNameAuthForm.longTime = ''
     return
   }
 },

需求二：
在这里插入图片描述

 <el-form-item label="活动结束时间：" prop="activityEndRadio">
   <el-radio-group v-model="activityForm.activityEndRadio" @input="radioChange('acEnd')">
     <el-radio label="1">手动关闭</el-radio>
     <el-radio label="2">定时关闭</el-radio>
   </el-radio-group>
 </el-form-item>
 <!-- 这里必须用v-if，否则rule校验会出问题 -->
 <!-- 此处不能模仿需求一（ :prop="activityForm.activityEndRadio?'activityEndTime':''" ），会出问题；个人猜测是因为prop不能等于空串 -->
 <el-form-item v-if="activityForm.activityEndRadio==='2'" label="" prop="activityEndTime">
   <el-date-picker
     :picker-options="pickerOptions0"
     :disabled="isView"
     value-format="yyyy-MM-dd HH:mm:ss"
     v-model="activityForm.activityEndTime"
     type="datetime"
     placeholder="选择日期时间">
   </el-date-picker>
 </el-form-item>

  data() {
    return {
      activityForm: {
        activityEndRadio: '1',
        activityEndTime: '',//活动结束时间
      },
      activityFormRules: {
        activityEndRadio: [ 
          {message: '',trigger: 'change', required: true,},
        ],
        activityEndTime: [
          { required: true, message: '请选择活动结束时间', trigger: 'blur' }
        ],
      },
    }
  },
  computed: {
  	//只允许选择系统当前时间往后的时间
    pickerOptions0() {
      let that = this;
      let hour = new Date().getHours();
      let min = new Date().getMinutes();
      return {
        // 日期选择限制
        disabledDate: time => {
          return time.getTime() <= new Date() - (24 * 60 * 60 * 1000);
        },
        // 时间选择限制
        selectableRange: `${hour}:${min}:00 - 23:59:00`
      };
    },
  },

radioChange(val) {
   if(val==='acEnd') {
     // 活动结束时间置空
     if(this.activityForm.activityEndRadio==='1') {
       this.activityForm.activityEndTime = ''
     }
     return
   }
 },