前几天使用vue-element-admin框架开发了一个简单的后台管理系统，在开发的过程之中也遇到了一些功能，以及对饿了么框架的使用遇到的一些问题，如何解决问题，记录一下。
资料相关
vue-element-admin
今天记录一个功能，提交表单的数据给后端，提交表单时候的请求参数差不多是这样子的，其中有单选框，下选框，（下拉框可以选择一个值，也可以选择多个值），以字符串数组的格式提交。
请求报文如下
{"questionContent":"题目1","correctAnswer":"正确答案","otherAnswer1":"错误答案1","otherAnswer2":"错误答案2","otherAnswer3":"错误答案3","userGrades":["kinderGarten","firstGrade","threeGrade","sixGrade"],"questionCategory":"简单"}
具体提交格式需要注意：
1：input输入框提交类型为字符串
2：radio只能单选，每次只能提交一个，类型为字符串
3：下拉框（年级）为数组，当选择一个option或者多个option的时候，格式都为字符串数组形式。
点击按钮，会出现一个弹框，在弹框里面有form表单，填写表单数据，再次点击确定的时候，调用一下保存的接口，将填写的数据提交给后端。
示例代码
<template> <div class="tab-container"> <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate" >添加</el-button> <el-dialog :visible.sync="dialogFormVisible"> <el-form :model="questionForm" ref="dataForm" label-position="left" label-width="90px" style="width: 400px; margin-left:50px;" > <el-form-item label="题目" prop="questionContent"> <el-input type="textarea" :rows="2" v-model="questionForm.questionContent"></el-input> </el-form-item> <el-form-item label="分类"> <el-radio-group v-model="questionForm.questionCategory" style="margin-right:12px;"> <el-radio v-for="(radio, index) in subjectList" :key="index" :label="radio">{{radio}}</el-radio> </el-radio-group> </el-form-item> <el-form-item label="正确答案" prop="correctAnswer"> <el-input v-model="questionForm.correctAnswer" /> </el-form-item> <el-form-item label="其他答案1" prop="otherAnswer1"> <el-input v-model="questionForm.otherAnswer1" /> </el-form-item> <el-form-item label="其他答案2" prop="otherAnswer2"> <el-input v-model="questionForm.otherAnswer2" /> </el-form-item> <el-form-item label="其他答案3" prop="otherAnswer3"> <el-input v-model="questionForm.otherAnswer3" /> </el-form-item> <el-form-item label="所属年级"> <el-select v-model="questionForm.userGrades" class="filter-item" placeholder="选择年级" multiple > <el-option v-for="item in tabMapOptions" :key="item.key" :label="item.label" :value="item.key" /> </el-select> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="dialogFormVisible = false">取消</el-button> <el-button type="primary" @click=" createData() ">确定</el-button> </div> </el-dialog> </div> </template> <script> //调用接口 import { saveSubject } from "@/api/content"; export default { data() { return { subjectList: ["黄金", "白银", "钻石"], input: "", tabMapOptions: [ { label: "幼儿园", key: "kinderGarten" }, { label: "一年级", key: "firstGrade" }, { label: "二年级", key: "secondGrade" }, { label: "三年级", key: "threeGrade" }, { label: "四年级", key: "fourthGrade" }, { label: "五年级", key: "fifthGrade" }, { label: "六年级", key: "sixGrade" }, { label: "小学以上", key: "gradeSchool" }, ], questionForm: { questionContent: "", correctAnswer: "", otherAnswer1: "", otherAnswer2: "", otherAnswer3: "", userGrades: [], questionCategory: "", }, dialogFormVisible: false, }; }, methods: { handleCreate() { this.questionForm = { questionContent: "", correctAnswer: "", otherAnswer1: "", otherAnswer2: "", otherAnswer3: "", userGrades: [], questionCategory: "", }; this.dialogFormVisible = true; }, //添加增加题目 async createData() { let form = null; form = this.questionForm; const params = form; const res = await saveSubject(params); console.log(res); if (res.code === "0000") { this.$message({ type: "info", message: "保存成功", }); this.dialogFormVisible = false; this.getQuerySubjectList(); return; } this.$message({ type: "error", message: "保存失败", }); }, }, }; </script> <style scoped> .tab-container { margin: 30px; } </style>
查看请求报文：
提交成功
