elmentPlus提交实现

下面是一个使用Element Plus实现表单提交的示例代码：

<template>
  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="姓名" prop="name">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="年龄" prop="age">
      <el-input v-model="form.age"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import axios from 'axios'
import { ref } from 'vue'

export default {
  setup() {
    const form = ref({
      name: '',
      age: ''
    })

    const submitForm = () => {
      const formRef = this.$refs.form
      formRef.validate(valid => {
        if (valid) {
          // 表单验证通过，可以提交表单数据
          axios.post('/api/submit', form.value)
            .then(res => {
              console.log(res.data)
            })
            .catch(err => {
              console.error(err)
            })
        } else {
          // 表单验证不通过，不提交表单数据
          return false
        }
      })
    }

    return {
      form,
      submitForm
    }
  }
}
</script>

在上面的代码中，我们使用了`el-form`、`el-form-item`和`el-input`等Element Plus组件来构建表单。在`submitForm`方法中，我们首先使用`this.$refs.form`获取到表单的引用，然后使用`formRef.validate()`方法对表单进行验证。如果表单验证通过，则使用axios发送POST请求将表单数据提交到服务器。如果表单验证不通过，则不提交表单数据。

需要注意的是，在使用Element Plus进行表单提交时，需要先对表单进行验证，以确保表单数据的正确性。在示例代码中，我们使用了`el-form`组件的`prop`属性来设置表单项的验证规则，使用`formRef.validate()`方法对表单进行验证。如果表单验证不通过，则不提交表单数据。