el-dialog弹出框编辑

先看效果：
官方的弹出框官方文档el-dialog按照官方文档区写就好了，我这里就不展示“表格”和“弹出框表单”的代码了，只留下事件的代码块。
点击“编辑”时，是将行数据赋值给“编辑表单”this.editForm = Object.assign({}, row)，这样就会把行数据在“编辑”中展示出来。注意：点击“编辑”事件时，加上this.dialogEditFormVisible=true，默认时，其为false，这样“弹出框”弹出时也携带着相对应的数据，修改完，点击“确认提交”就ok了。有点地方是不需要更改的，这里我加了disabled，加了它表示此处禁用（无法修改：无法修改的数据是不能变动了，比如：表里的“用户编号”、“用户账号”等是后端系统自动生成了，只可以查看，但修改可能会带来数据混乱的效果，也是保护了数据）。
对你有帮助请留下你的足迹


//触发编辑OKhandleEdit(row){this.dialogEditFormVisible=truethis.editForm = Object.assign({}, row)// console.log(row)},//编辑事件okhandleUpdate(index,row){const params = {name:this.editForm.label,usercode:this.editForm.usercode,username:this.editForm.username,phone_num:this.editForm.phone_num,wechat_num:this.editForm.wechat_num,sub_org_id:this.editForm.sub_org_id, //如何获取id？？sub_org_name:this.editForm.sub_org_name,   //所属机构role_type:this.editForm.role_type,   //角色类型role_name:this.editForm.role_name,    //角色email:this.editForm.email,manage_org:this.editForm.manage_org,   //????????manage_org_name:this.editForm.manage_org_name,   //管理机构}const id = this.editForm.idthis.$http.put('/xxx/xxxx/xxxxxx/'+ id +'/',params).then((res) => {if(res.status === 200){this.$message.success('修改成功')// this.tableDisplay()  //重新加载展示框// this.reload()    //刷新当前页面this.dialogEditFormVisible = false}else{this.$message.warning('修改失败，请重新点击“编辑”')}}).catch(() => {this.$message.danger('请求失败')})},

这个是弹出框编辑，行内编辑会在后面写出来。

el-dialog弹出框编辑相关推荐

easyui js解析字符串_EasyUI Dialog弹出框+JS执行字符串
虽然写得不是很全面,但这是项目中经常用到的 Dialog弹出框 Div标签 Dialog内容 iconCls:图标 closed:默认关闭 modal:模态框 JS代码 function openDi ...
使用easeui dialog弹出框中使用CKeditor多次加载后无法编辑问题
问题呈现:弹出框页面 <tr class="addtr"><th>内容</th><td><!-- <textarea r ...
dialog 弹出框，遮罩层覆盖内容
写完项目没太注意,并且情况是偶尔发生,点击dialog 的弹出框的时候,灰色遮罩层会覆盖内容上面, 这样的话可能是由于我们会发现浏览器遮罩层高于盒子遮罩层,会照成这样的问题,也有可能是我们给父元素加了 ...
art.dialog弹出框后再根据其内部iframe的大小调整大小
1.主页面,用来弹出弹出页面 //查看错误小练习$.exerciseClick = function(rowId ){$.event.get().preventDefault();var tdScor ...
android制作弹出框样式,Android Dialog 弹出框自定义样式
可以去除系统的Dialog的黑边,而且Dialog的样式和布局完全一样可以是不规则图形这个功能不是太难 ,不多说直接上代码先是根据系统的Theme创建一个自己的Theme 在R.styles.x ...
easyUI中dialog弹出框中数据加载不出来
在前端使用easyUI开发的过程中遇到一个奇怪的问题,easyUI中的dialog中的combobox数据有时加载不出来,或者是一些文字也有时加载不出来,后来发现,dialog每次关闭并不会销毁原di ...
Android开发：利用Activity的Dialog风格完成弹出框设计
转:http://www.linuxidc.com/Linux/2011-08/41933.htm 在我们使用Dialog时,如果需要用到很多自己设计的控件,虽然可以让弹出框显示出我们需要的界面,但却 ...
Bootstrap：弹出框和提示框效果以及代码展示
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...
JS组件Bootstrap实现弹出框和提示框效果代码
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...

el-dialog弹出框编辑

el-dialog弹出框编辑相关推荐

最新文章

热门文章