element-ui使用的问题记录3

Posted on | Post modified:
记录下最近一周使用elment-ui碰到的问题（4.6-4.10)

修改el-dialog中的高度

审查页面元素中，看到是一个el-dialog__body的css类在控制，因此需要控制的也就是这个

  • 在el-dialog中定义custom-class
  • 然后在css中，定义该元素的展示
1
2
3
4
5
6
7
8
9
10

.elmentSellChangeTypeDialog {
  width: 320px;
  height: 650px;
  border-radius: 10px;
  overflow: auto;
    .el-dialog__body {
      padding: 0;
    }
}

el-form的验证问题

  1. 可以针对某一行的数据进行单独校验
  2. 主动校验字段 this.$refs[formName].validate((valid) => {}
1
2
3
4
<el-form-item label="健康检查URL" prop="health_check_uri"
                       :rules="[{validator: checkHealth, trigger: 'blur'}]"  class="normal">
           <el-input v-model="deployJobForm.health_check_uri" placeholder="e.g.,/check" clearable></el-input>
         </el-form-item>
1
2
3
4
5
6
7
checkHealth (rule, value, callback) {
  if ((value === '' || value === null) && this.deployJobForm.health_check_type === 2) {
    return callback(new Error('请填写健康检查URL'))
  } else {
    return callback()
  }
},
1
2
3
4
5
6
7
8
9
submitForm(formName) {
  this.$refs[formName].validate((valid) => {
    if (valid) {
      alert('submit!');
    } else {
      console.log('error submit!!');
    }
  });
}

el-dialog的弹出框，点旁边区域不自动关闭

  • 在dialog中加入属性值:close-on-click-modal="false"