要实现的效果如下,初始化的时候,不可编辑,点击编辑按钮,编辑按钮隐藏,取消编辑按钮显示,部分输入输入框变为可编辑
& lt; el-dialog title=坝ハ昵椤笨矶??20 px”@close=癷sEdit=false”类="对话框dialogAdd "自定义类=癱ustom-dialog”
:可见。同步=" dialogEditVisible ": close-on-click-modal='假'比;
& lt; el-form ref=癳ditForm”:模型=癳ditForm”:内联=" true "标签位置=罢返摹眑abel-width==懊阅恪北取?10 px”大小;
& lt; el-form-item标签="工单号”道具=安弧北?
& lt; el-input v模型=" editForm。没有“disabled> & lt;/el-input>
& lt;/el-form-item>
& lt; el-form-item标签="客户姓名“道具=発hxm”比;
& lt; el-input v模型=" editForm。khxm”:禁用=" !isEdit | | editForm.openId”祝辞& lt;/el-input>
& lt;/el-form-item>
& lt; el-form-item标签="联系电话”道具=発hdh”比;
& lt; el-input v模型=" editForm。khdh”:禁用=" !isEdit | | editForm.openId”祝辞& lt;/el-input>
& lt;/el-form-item>
& lt; el-form-item标签="客户地址”比;
& lt; el-input v模型=" editForm。地址”disabled> & lt;/el-input>
& lt;/el-form-item>
& lt; el-form-item标签="营销人员,工号”在
& lt; el-input v模型=" editForm。yxry”disabled> & lt;/el-input>
& lt;/el-form-item>
& lt; el-form-item标签="网格区域”比;
& lt; el-input v模型=" editForm。qywg”disabled> & lt;/el-input>
& lt;/el-form-item>
& lt; el-form-item标签="业务类型”道具=皔wlx”比;
& lt; el-select v模型=" editForm。ywlx”:禁用=" !isEdit”占位符=" "比;
& lt; el-option v=皔wlxList项”:关键=跋睢?标签=跋睢?value=" https://www.yisu.com/zixun/item "祝辞& lt;/el-option>
& lt;/el-select>
& lt;/el-form-item>
& lt; el-form-item标签="报装宽带兆数(M)”=発dzs”类=提案“long-label”比;
& lt; el-select v模型=" editForm。kdzs”:禁用=" !isEdit”占位符=" "比;
& lt; el-option v=発dzsList项”:关键=跋睢?标签=跋睢?value=" https://www.yisu.com/zixun/item "祝辞& lt;/el-option>
& lt;/el-select>
& lt;/el-form-item>
& lt; el-form-item标签="手机基础套餐(最低消费)”类=發ong-label”道具=皊jjctc”比;
& lt; el-select v模型=" editForm。sjjctc”:禁用=" !isEdit”占位符=" "比;
& lt; el-option v=皊jtcList项”:关键=跋睢?标签=跋睢?value=" https://www.yisu.com/zixun/item "祝辞& lt;/el-option>
& lt;/el-select>
& lt;/el-form-item>
& lt; el-form-item标签="业务受理单截屏”在
& lt; p> & lt;一个类="支持" @click=靶恪痹诓榭赐计? lt;/a> & lt;/p>
& lt;/el-form-item>
& lt; el-form-item标签="下单时间“道具=癱reateTime”比;
& lt; el-input v模型=" editForm。createTime”disabled> & lt;/el-input>
& lt;/el-form-item>
& lt; el-form-item标签="备注”道具=氨缸ⅰ北?
& lt; el-input v模型=" editForm。备注:禁用=" ! isEdit”祝辞& lt;/el-input>
& lt;/el-form-item>
& lt;/el-form>
& lt; div槽=耙辰拧崩?v=癲ialog-footer editForm。在状态!=3”;
& lt; el-button v=" !isEdit " @click=" isEdit=true”大?"迷你"祝辞编辑& lt;/el-button>
& lt; el-button v-else @click=" cancelEdit "大?懊阅恪弊４侨∠嗉? lt;/el-button>
& lt; el-button类型=爸鳌盄click=皊aveEdit”大?懊阅恪钡脑诒４? lt;/el-button>
& lt;/div>
& lt;/el-dialog>
中数据的数据
editForm:{},//新增表单
isEdit:假的,//是否编辑
dialogEditVisible:假的,//新增模态框
图片:[],//图片信息
ywlxList:[],//业务类型列表
kdzsList:(“50”,“100”,“200”,“300”),//报装宽带兆数列表
sjtcList:(“38”,“58”,“88”,“98”,“128”,“138”,“188”),//手机基础套餐列表
viewDetail(行){
console.log(行)
这一点。editForm=this.deepClone(行)
这一点。dialogEditVisible=true
这一点。后美元(“/anapi/YxdController/getById”, {id:行。id},(数据)=比;{
这一点。editForm=data.yxd
this.editForm。qywg=row.name1 + row.name2 + row.name3 + row.gridName
this.editForm。地址=row.name1 + row.name2 + row.name3 +行。gridName + row.xxdz
this.editForm。yxry=行。yxCname +“-”+ row.yxId
这一点。currentItem=this.deepClone (this.editForm)
让一个=data.yxd。一个| | []
这一点。图像=[]
一。地图(项=比;{
this.images.push (this.config。httpHeadUrl +项目)
}）
}）
},//保存编辑
saveEdit () {
美元。refs.editForm.validate((有效的)=比;{
如果(有效){
this.startLoading ()
这一点。后美元(“/api/YxdController/editYxd”,这一点。editForm(数据)=比;{
message.success美元。(“修改成功!”)
这一点。dialogEditVisible=false
this.getTableData (1)
}）
}
}）
},//取消编辑
cancelEdit () {
这一点。isEdit=false
这一点。editForm=this.deepClone (this.currentItem)
},//查看图片
初始化(观众){
这一点。$观众=查看器
},
显示(){
如果(! this.images.length) {
message.error美元。(“暂无图片”)
返回
}
viewer.show美元。()
},
