效果如图:
方法:
在el-form-item上添加required,里面再放一层el-form-item,设置prop,在rules填校验规则
代码实例如下:
<template>
<div>
<el-form :rules="rules" :model="ruleForm" ref="ruleForm" label-width="100px">
<el-form-item label="PTZ数值" required>
<div style="display: flex;width: 100%;">
<el-form-item prop="ptzP">
<el-input v-model.trim="form.ptzP" placeholder="P" clearable></el-input>
</el-form-item>
<el-form-item prop="ptzT" style="margin: 0 5px;">
<el-input v-model.trim="form.ptzT" placeholder="T" clearable></el-input>
</el-form-item>
<el-form-item prop="ptzZ">
<el-input v-model.trim="form.ptzZ" placeholder="Z" clearable></el-input>
</el-form-item>
</div>
</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 {
form: {
ptzP: '',
ptzT: '',
ptzZ: '',
},
rules: {
ptzP: [
{
required: true,
message: "P值不能为空",
trigger: ["blur", "change"]
}
],
ptzT: [
{
required: true,
message: "T值不能为空",
trigger: ["blur", "change"]
}
],
ptzZ: [
{
required: true,
message: "Z值不能为空",
trigger: ["blur", "change"]
}
],
}
}
},
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()
}
}
}
</script>
<style lang="less" scoped></style>