自从用饿了么框架重构项目以来，遇到 很多问题，我都有一一记录下来，现在特喜欢这个框架，说实话，如果你是用了vue这个技术栈的话，一定要用饿了么的pc端框架哦，遇到问题的时候在网上百度一下，就能找到解决方案，还有很多社区可以讨论，社区文档都比较成熟，很容易上手~~
在添加的时候，需要点击添加按钮，出现一个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> 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() { const params = this.questionForm; alert(JSON.stringify(params)) //如果需要调用接口，请打开注释 // 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> </style>
