表单包含 输入框
, 单选框
, 下拉选择
, 多选框
等用户输入的组件。 使用表单,您可以收集、验证和提交数据。
注意:要进行表单验证,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)
}
});
};