vue el-form-item prop

在Vue中使用element-ui的el-form和el-form-item组件来实现表单的布局和验证。其中，el-form-item组件有一个prop属性，用于指定当前表单项所对应的表单数据对象中的属性名。在表单验证时，可以通过prop属性指定的属性名来获取表单数据，并根据需要进行验证。例如，如果我们有一个表单数据对象为formData，其中包含一个名为username的属性，那么可以在el-form-item组件中使用prop属性来指定该表单项所对应的属性名：

<el-form :model="formData" :rules="formRules">
  <el-form-item label="用户名" prop="username">
    <el-input v-model="formData.username"></el-input>
  </el-form-item>
  ...
</el-form>

这样，在表单验证时，可以通过$this.$refs.form.validate()方法来验证表单数据，并使用prop属性指定的属性名来获取对应的表单数据进行验证。例如：

export default {
  data() {
    return {
      formData: {
        username: ''
      },
      formRules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 表单验证通过，提交数据
          console.log(this.formData.username);
        } else {
          // 表单验证不通过，提示错误信息
        }
      });
    }
  }
}

在表单验证规则中，可以通过prop属性指定的属性名来设置对应的验证规则。例如，上面的代码中，我们通过formRules对象中的username属性来设置对应的验证规则，其中required为必填，message为错误提示信息，trigger为触发验证的方式。当然，这只是一个简单的例子，实际使用中还可以设置更多的验证规则。