vue3.0+element Plus表单提交，表单重置，表单校验

表单包含 输入框, 单选框, 下拉选择, 多选框 等用户输入的组件。 使用表单，您可以收集、验证和提交数据。

注意：要进行表单验证，prop一定要写，并且要与js代码中form表单的相对应

<el-form 
  :model="form"
  :label-position="labelPosition"
  label-width="100px"
  ref="ruleFormRef"
  :rules="rules">
  <el-form-item
     label="是否收费："
     prop="extraData.isCharge"
     :rules="[
       {
          required: true,
          message: '请选择是否收费',
          trigger: 'blur',
       },
      ]"
   >
  <el-radio-group v-model="form.extraData.isCharge">
     <el-radio label="否" />
     <el-radio label="是" />
  </el-radio-group>
  <el-form-item v-if="form.extraData.isCharge == '是'">
    <el-col :span="11">
       <el-input
          v-model="form.extraData.charge"
          autocomplete="off"
          placeholder="请输入价格"
       />
    </el-col>
    <el-col class="text-center" :span="2">
       <span class="text-gray-500">元</span>
    </el-col>
   </el-form-item>
  </el-form-item>
     <el-form-item
        label="算法介绍："
        prop="note"
        :rules="[
          {
            required: true,
            message: '请填写上架算法的描述',
            trigger: 'blur',
          },
        ]"
      >
      <el-input
         v-model="form.note"
         autocomplete="off"
         type="textarea"
         :autosize="{ minRows: 2, maxRows: 4 }"
         placeholder="请输入描述"
      />
    </el-form-item>
    <el-form-item
      label="运行效果："
      :rules="[
        {
           required: true,
           message: '请上传运行效果',
           trigger: 'blur',
        },
      ]"
    >
    <el-upload
       action="#"
       list-type="picture-card"
       :auto-upload="false"
       :on-change="handleIconChange"
       accept=".jpg,.png"
       :before-upload="beforeRunTaskPictureUpload"
     >
       <el-icon><Plus /></el-icon>
       <template #file="{ file }">
         <img class="el-upload-list__item-thumbnail" :src="file.url" style="width: 150px"/>
       </template>
      </el-upload>
   </el-form-item>
   <el-form-item label="联系电话：" prop="extraData.phone">
      <el-input
         v-model="form.extraData.phone"
         autocomplete="off"
         placeholder="请输入电话"
         style="width: 200px"
         :maxlength="18"
      />
     </el-form-item>
</el-form>
<template #footer>
  <span class="dialog-footer">
      <el-button @click="resetForm(ruleFormRef)">取消</el-button>
      <el-button type="primary" @click="onSave(ruleFormRef)">完成</el-button>
  </span>
</template>

 这里有一个图片上传，也是使用element Plus中的upload,在我之前的一篇文章有写到有关上传的问题，大家如果有问题可以看！！这里我就不过多的讲解了。

const ruleFormRef = ref<FormInstance>();
const labelPosition = ref("left"); //input 输入框对其方式

const form = reactive({
  note: "",
  extraData: {
    previewImg: [],
    isCharge: "否",
    charge: "",
    phone: "",
  },
});

//重置表单
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

//表单提交
const onSave = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      isSending.value = true;
      saveAlgConfigMarket({
        algConfigId: query.id,
        command: {
          extraData: form.extraData,
        },
      });
    } else {
      // console.log('error submit!', fields)
    }
  });
};