vue结合element ui 怎么做到点击按钮时出发校验

在 Vue.js 中结合 Element UI 进行表单校验，可以使用 Element UI 提供的 el-form 组件和 el-form-item 组件，以及 Vue.js 提供的 $refs 方法。

在 el-form-item 组件上添加 prop 属性，该属性的值为要校验的字段名：

<el-form ref="myForm">
  <el-form-item label="用户名" prop="username">
    <el-input v-model="form.username"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="password">
    <el-input type="password" v-model="form.password"></el-input>
  </el-form-item>
</el-form>

在 el-form 组件上添加 rules 属性，该属性的值为一个对象，其中 key 是要校验的字段名，value 是一个数组，用来定义校验规则：

data() {
  return {
    form: {
      username: '',
      password: ''
    },
    rules: {
      username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
      ]
    }
  }
},

在点击提交按钮时，可以通过 this.$refs.myForm.validate() 方法，来触发表单校验。如果校验通过，返回 true，否则返回 false：

methods: {
  submitForm() {
    this.$refs.myForm.validate((valid) => {
      if (valid) {
        // 表单校验通过，执行提交操作
      } else {
        // 校验失败，不执行提交操作
        return false;
      }
    });
  }
}

在这个例子中，如果表单校验不通过，就会阻止提交操作，并且不会触发后续操作，如果表单校验通过，就会执行提交操作。