vue使用element框架实现常用的功能

1. 图片上传

页面代码

<el-form-item label="获奖证书" prop="imgUrl"> <el-upload :action="uploadUrl" :before-upload="beforeUploadHandle" :on-success="successHandle" list-type="picture-card" :on-remove="handleRemove" :on-preview="handlePictureCardPreview" :limit="1" :on-exceed="handleExceed" :file-list="fileList" > <b class="el-icon-plus">上传图片</b> </el-upload> </el-form-item>

data

fileList: [], uploadUrl: "",

方法

//图片删除 handleRemove(file, fileList) { this.dataForm.imgUrl="" for(var i = 0;i<fileList.length;i++){ this.dataForm.imgUrl+=fileList[i].url+";" } }, handlePictureCardPreview(file) { this.dialogImageUr = file.url; this.dialogVisible = true; }, // 上传之前 beforeUploadHandle(file) { if ( file.type !== "image/jpg" && file.type !== "image/jpeg" && file.type !== "image/png" && file.type !== "image/gif" ) { this.$message.error("只支持jpg、png、gif格式的图片！"); return false; } this.num++; }, // 上传成功 successHandle(response, file, fileList) {   this.fileList = fileList;   this.successNum++; if (response && response.code === 0) { this.dataForm.imgUrl=response.url; if (this.num === this.successNum) { this.$confirm("操作成功, 是否继续操作?", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }).catch(() => { this.visible = false; }); } } else { this.$message.error(response.msg); } }, // 文件超出个数限制时的钩子 handleExceed(file, fileList) { // const me = this // me.$message.warning('只能上传一个文件') this.$message.error("获奖证书只能上传一张"); },

数据回显（前端）

this.fileList=data.stuHonor.images

数据回显（后端）

@RequestMapping("/info/{id}")   @RequiresPermissions("generator:stuhonor:info")   public R info(@PathVariable("id") String id){ StuHonorEntity stuHonor = stuHonorService.getById(id);      String gameName = stuHonor.getGameName();       String img=gameName+".jpg";       HashMap<Object, Object> map = new HashMap<>();       map.put("name",img);       map.put("url",stuHonor.getImgUrl());       ArrayList<Object> list = new ArrayList<>();       list.add(map);       stuHonor.setImages(list);       return R.ok().put("stuHonor", stuHonor);   } 实体类定义： @TableField(exist = false)    private ArrayList images;

 

1. 排序

<el-form-item label="排序" prop="seqNo"> <el-input-number v-model="dataForm.seqNo" size="mini" @change="handleChange(dataForm.id,dataForm.seqNo)" :min="1" ></el-input-number> </el-form-item>

 

1. 文本框

<el-form-item label="简介" prop="description"> <el-input style="width:500px" type="textarea" :rows="8" maxlength="200" placeholder="最多200字" v-model="dataForm.description"> </el-input> </el-form-item>

 

1. 下拉框

<el-select v-model="dataForm.type" placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" ></el-option> </el-select>   options: [ { value: "1", label: "老师介绍" }, { value: "2", label: "团队介绍" } ],

 

1. 对话框

<el-dialog title="简介" :visible.sync="dialogVisible1" width="30%" :before-close="handleClose"> <span>{{description}}</span> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible1 = false">取 消</el-button> <el-button type="primary" @click="dialogVisible1 = false">确 定</el-button> </span> </el-dialog>

data

dialogVisible1:false,

使dialogVisible1:true,就可以弹出对话框了

1. 富文本框

<el-form-item label="机构荣誉："> <tinymce ref="editor" v-model="dataForm.description" :height="400"/>  </el-form-item>

 

import Tinymce from "../../../components/tinymce";

 

1. 预览效果

<el-dialog :visible.sync="dialogVisible" append-to-body>

<img width="100%" :src="this.dialogImageUrl" alt="">

<span class="content" v-html="dataForm.description">{{dataForm.description}}</span>

</el-dialog>