elementui from表单提交_elementui upload与form一起提交
学生基本信息管理操作中,有照片,可以上传也可以不上传,在表单界面可以修改照片,el-upload控件可以带额外参数提交,jquery的post模拟不了成表单带文件提交的方式,因此,判断如果有上传文件时,用el-upload的submit方法,没有文件时使用post提交
页面部分:
:auto-upload="false"
:data="frmst"
action="/Admin_Areas/StInfo/SaveStinfo"
:show-file-list="false"
list-type="picture"
:on-change="filechange"
:before-upload="beforeAvatarUpload"
:on-success="saveok">
上传照片
action设置后端接收地址,:data设置额外参数为学生的frm,list-type设置显示图片,on-change事件中设置文件上传标记,on-success中设置提交完毕后返回数据的处理代码
data中:
photo: '', 用来绑定到图片对象
havefile: false //标记是否上传有文件
methods中:
reset() {
//初始化标记与表单数据
if (this.$refs.frmst) {
this.$refs.frmst.resetFields();//不起作用
}
this.frmst.act = '新增';
this.photo = '';
this.havefile = false;
},
add() {
this.reset();
var that = this;
//表单字段太多,先全部清空
$.each(this.frmst, function (i, v) {
that.frmst[i] = '';
})
//再给设几个初始值
this.frmst.show = true;
this.frmst.act= '新增';
this.frmst.labelPosition = 'right';
this.frmst.sex = '男';
this.frmst.bl = false;
this.frmst.xjzt = '有';
},
edit(row) {
//修改记录
this.reset();
this.frmst.act = '修改';
var that = this;
$.each(row, function (key, val) {
that.frmst[key] = val;
})
//photo设置为后端获取图片的地址
this.photo = { url: '/admin_areas/stinfo/GetStinfoPhoto?id=' + row.stid + '&t='+Math.floor(Math.random() * 10 + 1) };
this.frmst.show = true;
},
save() {
var that = this;
$.each(this.frmst, function (i, v) {
if (v == null) {
that.frmst[i] = '';
}
})
this.$refs.frmst.validate(valid => {
if (valid) {
if (this.havefile) {
this.$refs.upload.submit(); //上传控件提交
} else {
$.post('/Admin_Areas/StInfo/SaveStinfo', this.frmst, function (res) {
var r = eval('(' + res + ')')
if (r.success == true) {
that.setdata(that.frmst);
that.frmst.show = false;
vuesuccess(that);
} else {
vueerr(that, r.msg)
}
})
}
}
})
},
saveok(res, file, fileList) {
//上传控件提交后的返回结果处理
var r = eval('(' + res + ')')
if (r.success == true) {
this.$refs.upload.clearFiles();
this.setdata(this.frmst);
this.frmst.show = false;
vuesuccess(this);
} else {
vueerr(this, r.msg);
}
},
setdata(row) {
if (this.frmst.act == '新增') {
this.frmsrh.stid = row.stid;
}
this.list();
},
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 格式!');
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
}
return isJPG && isLt2M;
},
filechange(file) {
//上传控件有文件变化
this.photo = file;
this.havefile = true;
},
elementui from表单提交_elementui upload与form一起提交相关推荐
- elementui 嵌套表单验证_elementUI 表单嵌套表格验证,日期选择器联动限制等写法
最近项目需要做巡检相关的功能,用到的表单表格比较多,加上各种验证快玩出了花,倒不是难,就是挺繁琐的,记录一下比较基础的写法. 1.表单嵌套表格的验证: 如图,表单被分为了一个可以动态增减的表格和普通的 ...
- elementui 按钮 表单_elementUI 学习入门之 Button 按钮
基础按钮用法 按钮分为:默认按钮.朴素按钮(plain).圆角按钮(round).圆形按钮(circle).eg: 朴素按钮 通过 type 属性指定 primary.success.info.war ...
- elementui 按钮 表单_仿ElementUI实现一个Form表单的实现代码
使用组件就像流水线上的工人:设计组件就像设计流水线的人,设计好了给工人使用. 一. 目标 仿 ElementUI 实现一个简单的 Form 表单,主要实现以下四点: Form FormItem Inp ...
- ElementUI的表单验证及常用规则
element-cn.eleme.io/#/zh-CN/com- 在官网上有关于form组件的详细介绍 这里总结了几个常用的规则,方便下次使用 必填,必选,邮箱,手机号,时间,数字,数组,字符长度, ...
- vue基础:ElementUI的表单
文章目录 ElementUI表单 一个简单的案例 表单的主要组件 表单组件的使用 行内的表单 对齐方式 表单验证 自定义的验证规则 表单内组件尺寸控制 总结form模块的属性 form模块的方法 Fo ...
- element-ui清除表单验证提示语
一.需求描述: 使用了element-ui的表单, 点击发布当物流单号为空时,会出现提示,如果我通过上方下拉框切换了物流名称,我希望能够主动的清除下方的红色提示信息. 二.解决方案 1.编写表单代码, ...
- 基于VUE的ElementUi可视化表单设计器布局器
码农苦码农懂的个人空间 工作日志 正文 基于VUE的ElementUi可视化表单设计器布局器 顶 原 码农苦码农懂 发布于 09/11 15:35 字数 1187 阅读 41 收藏 0 点赞 1 评论 ...
- python提交表单无效_使用Django Form解决表单数据无法动态刷新的两种方法
一.无法动态更新数据的实例 1. 如下,数据库中创建了班级表和教师表,两张表的对应关系为"多对多" from django.db import models class Class ...
- antd提交表单_antd快速开发(Form篇)
前言 由于一直在做中台业务,后台项目特别多,但是后台项目的特点是:大量的列表和大量表单,重复开发会降低效率,所以我这边总结了一下使用antd组件搭建form的快捷方法.希望能对大家有用. 传统Form ...
最新文章
- DVWA默认用户名密码
- python 导入库:from scipy.misc import imread出错问题
- (转)同一服务器部署多个tomcat时的端口号修改详情
- 5月23日任务 LAMP架构介绍、MySQL、MariaDB介绍、 MySQL安装
- 【OpenCV3】图像翻转——cv::flip()详解
- 在python IDLE里执行py文件
- 数据库-SQL分类介绍及总结
- dasblog的安装
- 使用CoreProfiler/NanoProfiler实现跨平台amp;应用的整合性能调试
- 两种方法将Android NDK samples中hello-neon改成C++
- 外设驱动库开发笔记22:ADXL345三轴数字加速度计驱动
- matlab相机标定 外参数,相机外参数的标定.doc
- MySQL 输入任何语句都提示You must reset your password using ALTER USER 解决方法
- ajax+lazyload时lazyload失效问题及解决
- 互联网IT行业,未来十年这些编程语言将大展宏图,学它们准不会错!
- 想做数学建模?先看看这些MATLAB函数吧!
- ASP.NET Excel数据导入数据库
- java购买同一件商品时加锁_java中CAS的ABA问题思考和整理(不看后悔系列)
- IDEA 查看本地历史版本
- SessionAffinity分发策略
热门文章
- Universal-Image-Loader,android-Volley,Picasso、Fresco和Glide开源组件加载网络图片的优缺点比较...
- 【Oracle】锁表查询与解锁
- JSF 2.0/2.1 生命周期简介
- Yii基于角色的访问控制(非Rbac)
- 以太网供电新标准POE+,IEEE802.3at解析
- request_do?send方法
- 数据库设计方法、规范与技巧
- 加勒比海兔_加勒比海海洋物种趋势
- 黑苹果 wifi android,动动手指零负担让你的黑苹果连上Wifi
- 带有postgres和jupyter笔记本的Titanic数据集