<template>
<div>
//ref="editForm"必须,下面方法会用到该名称,:rules="formRules"必须
<el-form ref="editForm" :model="editForm" :rules="formRules">
//prop="country"必须,对应相应的rule
<el-form-item label="国家" prop="country">
<el-input
v-model="editForm.country"
placeholder="请填入国家"
></el-input>
</el-form-item>
//prop="types"必须,对应相应的rule
<el-form-item label="类型" prop="types">
<el-select v-model="editForm.type" filterable placeholder="请选择">
<el-option
v-for="item in types"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
</el-form>
<el-button type="primary" v-on:click="add('editForm')">确定</el-button>
</div>
</template>
<script>
export default {
name: "RuleDemo",
data() {
return {
//rules集合
formRules: {
country: [
{ required: true, message: "请填入国家", trigger: "change" },
{ min: 3, max: 10, message: "名称长度在3到10个字符", trigger: "change" }
],
types: [
{ required: true, message: "请选择类型", trigger: "blur" },
{ required: true, message: "请选择类型", trigger: "change" }
]
},
types: [
{ value: "CHN", label: "中国" },
{ value: "USA", label: "美国" },
{ value: "UK", label: "英国" }
],
editForm: {
country: "",
type: ""
}
};
},
methods: {
//editForm为ref="editForm"的值
add(editForm) {
this.$refs[editForm].validate(valid => {
//验证通过
if (valid) {
//其他逻辑
}
//验证未通过
else {
//其他逻辑
}
});
}
}
};
</script>