<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>