problem description
when the page comes back after loading the request data, it will touch the publication sheet to check, and there will be a problem with the style
the environmental background of the problems and what methods you have tried
has not found an effective way, I do not know where to see the real-time monitoring value changes, so that all the verification methods can be triggered, but this is difficult
related codes
/ / Please paste the code text below (do not replace the code with pictures)
<template>
<div class="el-validate">
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="80px"
class="demo-ruleForm">
<el-form-item
label=""
prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item
label=""
prop="region">
<el-select
v-model="ruleForm.region"
placeholder="">
<el-option
label=""
value="shanghai">
</el-option>
<el-option
label=""
value="beijing">
</el-option>
</el-select>
</el-form-item>
<el-form-item
label=""
prop="delivery">
<el-switch v-model="ruleForm.delivery"></el-switch>
</el-form-item>
<el-form-item
label=""
prop="resource">
<el-radio-group v-model="ruleForm.resource">
<el-radio label=""></el-radio>
<el-radio label=""></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item
label=""
prop="desc">
<el-input
type="textarea"
:rows="4"
v-model="ruleForm.desc">
</el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm("ruleForm")"></el-button>
<el-button @click="resetForm("ruleForm")"></el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
ruleForm: {
name: "",
region: "",
delivery: false,
resource: "",
desc: ""
},
rules: {
name: [
{ required: true, message: "", trigger: "blur" },
{ min: 3, max: 5, message: " 3 5 ", trigger: "blur" }
],
region: [
{ required: true, message: "", trigger: "change" }
],
date1: [
{ type: "date", required: true, message: "", trigger: "change" }
],
date2: [
{ type: "date", required: true, message: "", trigger: "change" }
],
type: [
{ type: "array", required: true, message: "", trigger: "change" }
],
resource: [
{ required: true, message: "", trigger: "change" }
],
desc: [
{ required: true, message: "", trigger: "blur" }
]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert("submit!");
} else {
console.log("error submit!!");
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
},
mounted() {
setTimeout(() => {
this.ruleForm = {
name: " ",
region: "shanghai",
delivery: true,
resource: "",
desc: " "
}
}, 3000)
}
}
</script>
<style lang="less">
.el-validate {
padding: 15px;
margin: 5vh auto;
width: 60vw;
min-height: 300px;
min-width: 300px;
border-radius: 10px;
box-shadow: 5px 12px 10px -sharpccc, -5px -12px 20px -sharpccc;
.el-form-item {
display: flex;
justify-content: flex-start;
}
}
</style>
the effect shown on the page
you can see that the form is punished and there is obviously something wrong with the style