el-form表单验证的prop的值必须跟
v-model="filterForm.kindName"里面的值一致,否则表单验证会有红色提示框
<el-form :model="filterForm" :rules="rules" ref="ruleForm"
label-width="100px" class="demo-ruleForm" >
<el-form-item label="名称" prop="kindName">
<el-input v-model="filterForm.kindName"></el-input>
</el-form-item>
<el-form-item label="描述" prop="desc">
<el-input
type="textarea"
:rows="2"
placeholder="请输入内容"
v-model="filterForm.desc">
</el-input>
</el-form-item>
<el-form-item label="父级节点" prop="parentId">
<el-select v-model="filterForm.parentId" style="width:100%" placeholder="请选择">
<el-option v-for="item in treeData"
:key="item.id"
:label="item.kindName"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
</el-form>
rules: {
kindName: [
{ required: true, message: '请输入名称', trigger: 'blur' },
],
desc: [
{ required: true, message: '请输入描述内容', trigger: 'change' }
],
parentId: [
{ required: true, message: '请选择', trigger: 'change' }
],
}
}