一. select下拉框组件
它是一个表单提交里边有个下拉框，汽车类型是一个数组，是后台接口请求获取的数据 typeList: [{id：1, carType: '奔驰'}, {id: 2, carType: '宝马'}...] // 结构准备 <FormItem label="汽车类型" prop="typeId"> <Select v-model="addForm.typeId"> <Option v-for="item in typeList" :key="item.id" :value="item.id" :label="item.carType" >{{item.carType}}</Option> </Select> </FormItem> // 数据准备及表单预验证 data() { return { // 添加 对话框 的表单对象 addForm: { name: "", typeId: "", remark: "" }, // 添加 对话框 的表单预验证规则 addFormRules: { remark: [{ required: true, message: "评论不能为空", trigger: "blur" }], name: [ { required: true, message: "汽车名称不能为空", trigger: "blur" } ], typeId: [ { required: true, message: "汽车类型不能为空", trigger: "change", type: "number" // 这一行很重要，关系到下拉框是否显示与id对应的carType } ] } } }, // 逻辑 methods() { // 添加汽车 对话框点击确定 okAdd() { // 表单 预验证 过后再 调接口 this.$refs.addFormRef.validate(async valid => { if (!valid) return; // 调接口 ... }) } }二 . upload组件上传文件
// 结构准备 <FormItem label="汽车图片"> <img :src="imgFile" style="width: 50px;height: 50px" /> <Upload action="/api/car/upload" // action属性的值是 请求上传文件接口的路径 !important :on-success="uploadSuccess" :show-upload-list="false" > <Button type="primary">上传图片</Button> </Upload> </FormItem> // 数据准备 data() { return() { // 上传图片的路径 imgFile: "", } } // 逻辑准备 methods() { // 添加图片上传 成功的回调 uploadSuccess(response, file, fileList) { this.imgFile = response.result.filePath; } }