//ref可用于表单验证 model用于绑定数据 rule用于验证规则 labale-with用于控制表单项文案宽度
<el-form ref="form" :model="form" :rule="rules" label-width="200px">
<el-form-item label="名字"> //label表单项文案
<el-input v-model="form.name"></el-input> //v-model数据绑定
</el-form-item>
<el-button @click="submit">提交</el-button>
</el-form>
data() {
form: {
name: '';
},
rule: {
name: [
{ required: true, message: '请输入名字', trigger: 'blur' },
{ min: 1, max: 5, message: '请输入1-5位名字', trigger: 'blur' }
]
}
},
methods: {
submit() {
this.$refs.form.validate(valid => {
if(!valid) {
this.$message.error("请正确填写表单")
return
} else {
const { data: res } = this.$axios.get(`xxx`)
}
})
}
}