computed: { rulesList: function() {if(this.temp.pay_type) {returnthis.rules }else{returnthis.rules2 } } }, 2.在data()中定义多个rule规则,用三元表达式来判断当前需要的规则。 <el-formclass="dialog-body"ref="from":rules="!form.id ? 'rules' : 'rules2'":model="temp"> <!--这里为表...
element-ui虽然有el-form组件,但是仍然需要手动写el-form-item。 这里希望进一步抽离配置,在el-form的基础上封装个enhanced-el-form组件。 使用的时候希望这样,不再需要手动写里面的el-form-item: <enhanced-el-form :model="model" :schema="schema" ></enhanced-el-form>复制代码 1. 这边借鉴cube-ui的form...
el-form、form 等表单校验哪些事 1. el-dialog 弹框固定在窗口上,如何设置上代码1 2 3 4 5 6 7 /deep/ .el-dialog { margin: 5vh auto !important; } /deep/ .el-dialog__body { height: 80vh; overflow: hidden; }2. el-radio 单选处理...
首先是不管是添加还是编辑,都需要将子组件需要的对象属性一一写出来,传给子组件, 然后是主要用到了el-form表单有一个清空重置表单数据的事件方法resetField(),在子组件表单弹窗打开的时候清空一下,在关闭子组件表单弹窗的时候还需要调用resetField()去重置表单数据。这样编辑数据之后再次打开添加数据,页面不会有之前的...
baseForm:{ checkList:['1','2'],status:'1',},ruleValidate:{} //整个form表单的校验规则 } },computed:{ //这⾥由于根据baseForm.status的不同取值动态更新其他表单项的校验规则，所以放在computed⾥监听 ruleList() { return [{ required:this.baseForm.status === '2'?false:true, type:'ar...
vueel-form多规则rules验证 当我们在使⽤vue el-form的时候，经常会根据传⼊的值来动态验证表单信息，⽐如新建，编辑表单，不同的情况下，需要的验证⽅式不⼀样。根据这样的需求，我们有两种⽅法解决：1.在data()中定义两个rule规则,⽤computed根据值动态验证。<el-form class="dialog-body" :rules...
<el-form> // data中定义rules updateQusRulesSel:[];updateQusRules:[];// computed方法 computed:{ // this.updateQusTable.showSelect自己定义的标识 updateQusRulesList:function(){ if (this.updateQusTable.showSelect){ return this.updateQusRulesSel;} else { return this.updateQusRules;}...
<el-form-itemclass="select-point"label="课程名称"prop="courseName"><el-inputplaceholder="请输入课程名称"v-model="formData.courseName"clearable:value="courseName+formData.courseName"></el-input></el-form-item> computed:{//课程名称-学年学季年级学科(限制30字)courseName(){letdata=this.formData...
computed: { uploadDisabled() { // 这段代码存在逻辑漏洞,当 form 表单为 disabled,el-upload 为 false 不起作用 return this.disabled || (this.elForm || {}).disabled; } } 注意:form 表单元素普遍存在上述问题: this.$options.propsData.hasOwnProperty('disabled') ? this.disabled : (this.elFo...
<el-form-item label="基准期:" prop="baseTaskId"> <el-date-picker v-model="dialogForm.baseTaskId" type="week" format="yyyy 第 WW 周" placeholder="请选择周报基准期" value-format="yyyyMMdd" @change=" (val) => { changeQueryTime(val, 'week', 'baseTaskId') }" ...