vue元素模态框表格形式的可编辑表单实现

要实现的效果如下，初始化的时候，不可编辑，点击编辑按钮，编辑按钮隐藏，取消编辑按钮显示；部分投入输入框变为可编辑

el-dialog title='营销单详情width=' 920 px ' @ close=' isEdit=false ' class=' dialog dialog add ' custom-class=' custom-dialog ' :可见。sync=' dialogEditVisible ' : close-on-click-modal=' false ' El-form ref=' editForm ' style=' margin-right 3360 20px；型号=' editForm ' :内联=' true '标签-位置=' right '标签-宽度=' 110 px '大小=' mini ' El-form-项目标签='工单号prop=' no ' El-输入v-model='编辑表单。否'禁用/El-输入/El-表单-项目El-表单-项目标签='客户姓名prop=' khxm ' El-input v-model=' edit form。khxm ' :已禁用='！isEdit | | editform。' OpenID '/El-输入/El-表单-项目El-表单-项目标签='联系电话prop=' khdh ' El-input v-model=' edit form。khdh ' :禁用='！isEdit | | editform。' OpenID '/El-输入/El-表单-项目El-表单-项目标签='客户地址El-input v-model=' editform。“地址”已禁用/El-输入/El-表单-项目El-表单-项目标签='营销人员-工号El-input v-model=' editform。' yxry '禁用/El-输入/El-表单-项目El-表单-项目标签='网格区域el-input v-model='editForm.qywg '禁用/El-输入/El-表单-项目El-表单-项目标签='业务类型prop=' ywlx ' El-select v-model=' edit form。ywlx ' :已禁用='！isEdit ' placeholder=' El-option v-for=' ywlxList '中的项目：键=' item ' :标签=' item ' :值=' item '/El-option/El-select/El-form-item El-form-item标签='报装宽带兆数(M)' prop=' kdzs ' class=' long-label ' El-select v-model=' edit form。kdzs ' :已禁用='！isEdit ' placeholder=' El-option v-for=' kdz list '中的项目：键='项目' :标签='项目' :值='项目'/El-option/El-select/El-form-item El-form-item标签='手机基础套餐（最低消费)' class=' long-label ' prop=' sjtc ' El-select v-model=' edit form。sjctc ' :禁用='！isEdit ' placeholder=' El-option v-for=' sjt list中的项目：键=' item ' :标签=' item ' :值=' item '/El-option/El-select/El-form-item El-form-item标签='业务受理单截屏pa class=' text-base ' @ click=' show '查看图片/a/p/El-表单-项目埃尔-表单-项目标签='下单时间prop='创建时间' El-输入v-model='编辑表单。“创建时间”已禁用/El-输入/El-表单-项目El-表单-项目标签='备注道具='备注el-input v-model='editForm。备注：disabled='！isEdit/El-input/El-form-item/El-form div slot=' footer ' class=' dialog-footer ' v-if='编辑表单。状态！=3' el-button v-if='！isEdit ' @ click=' isEdit=true ' size=' mini '编辑/El-button El-button v-else @ click='取消了它' size=' mini '取消编辑/el按钮el按钮类型=' primary ' @ click=' SaveEdIt ' size=' mini '保存/el-button /div /el-dialogdata中的数据

editForm: {}，//新增表单isEdit: false，//是否编辑dialogEditVisible: false，//新增模态框images: []，//图片信息ywlxList: []，//业务类型列表kdzsList: ['50 '，' 100 '，' 200 '，' 300']，//报装宽带兆数列表sjticlist :[' 38 '，' 58 '，' 88 '，' 98 '，' 128 '，' 138 '，' 188']，//手机基础套餐列表视图详细信息(行){ console.log(行)this.editForm=this.deepClone(行)这个。dialogeditvisible=true this .$ post('/anapi/YxdController/getById '，{id: row.id}，(数据)={这个。编辑表单=数据。yxd这个。编辑表单。qywg=行。命名1行。命名第2行。说出第三行。网格名称。编辑表单。地址=行。命名1行。命名第2行。说出第三行。网格名称行。xdz这个。编辑表单。yxry=row。yxconname '-'行。yxid这个。currentitem=this .保存编辑saveEdit(){ this .$refs.editForm.validate((有效)={ if(有效){ this.startLoading() this .$ post('/API/YxdController/editYxd '，this.editForm，(数据)={ this .$message.success('修改成功!')这个。dialogeditvisible=false this。gettabledata(1)})})}，//取消编辑canceled ItT(){ this。isedit=false this。editform=this。深度克隆(这个。currentitem)}，//查看图片inited(查看器){ this .$viewer=viewer }，show () { if(！{这个$message.error('暂无图片)返回}这个$viewer.show() }，以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。