el-form validate 校验信息显示在输入框右侧并距离50px

在Element UI库中的`el-form`组件中，如果你想要实现在输入框右侧显示校验信息，并保持一定的距离，你可以使用`el-form-item`的`inline-message`属性以及自定义样式来达到这个效果。`inline-message`用于显示实时的验证信息，设置为`{offset:'50px'}`可以将它移动到输入框的右边。

例如：

<template>
  <el-form :inline="true">
    <el-form-item label="字段名" prop="field" inline-message="{ offset: '50px' }">
      <el-input v-model="formData.field"></el-input>
      <span slot="tip">{{ validateMessage }}</span>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formData: { field: '' },
      validateMessage: ''
    };
  },
  methods: {
    // 模拟一个校验函数，可以根据实际业务逻辑填写
    validateField() {
      if (!this.formData.field) {
        this.validateMessage = '请输入内容';
      } else {
        this.validateMessage = '';
      }
    },
    // 验证触发事件，如表单提交前
    handleValidate() {
      this.validateField();
    }
  },
  watch: {
    formData(field) {
      this.validateField();
    }
  }
};
</script>

<style scoped>
.el-form-item__inline-message {
  position: absolute;
  right: 50px; /* 这里调整距离 */
}
</style>

在这个例子中，当你修改`formData.field`时，`validateField`会被调用，检查输入是否合格，并在`el-form-item`的`slot="tip"`处显示相应的校验信息。同时，CSS样式会定位`inline-message`到输入框的右侧。