vue+element 模态框表格形式的可编辑表单实现

前端  /  管理员 发布于 5年前   620

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

                                                                                                                                                                                                                                                            
查看图片
                                                      
      编 辑      取消编辑      保 存      

data中的数据

 editForm: {},        // 新增表单 isEdit: false,   // 是否编辑 dialogEditVisible: false,  // 新增模态框 images: [], // 图片信息 ywlxList: [],    // 业务类型列表 kdzsList: ['50', '100', '200', '300'],    // 报装宽带兆数列表 sjtcList: ['38', '58', '88', '98', '128', '138', '188'],    // 手机基础套餐列表

 viewDetail(row){    console.log(row)    this.editForm = this.deepClone(row)    this.dialogEditVisible = true    this.$post("/anapi/YxdController/getById", {id: row.id}, (data) => {      this.editForm = data.yxd      this.editForm.qywg = row.name1 + row.name2 + row.name3 + row.gridName      this.editForm.address = row.name1 + row.name2 + row.name3 + row.gridName + row.xxdz      this.editForm.yxry = row.yxCname + '-' + row.yxId      this.currentItem = this.deepClone(this.editForm)      let imgs = data.yxd.imgs || []      this.images = []      imgs.map(item => {        this.images.push(this.config.httpHeadUrl + item)      })    })  },  // 保存编辑  saveEdit(){    this.$refs.editForm.validate((valid) => {      if (valid) {        this.startLoading()        this.$post("/api/YxdController/editYxd", this.editForm, (data) => {          this.$message.success("修改成功！")          this.dialogEditVisible = false          this.getTableData(1)        })      }    })  },  // 取消编辑  cancelEdit(){    this.isEdit = false    this.editForm = this.deepClone(this.currentItem)  },  // 查看图片  inited (viewer) {    this.$viewer = viewer  },  show () {    if(!this.images.length){      this.$message.error("暂无图片")      return    }    this.$viewer.show()  },

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

您可能感兴趣的文章:

• Vue+Element实现表格编辑、删除、以及新增行的最优方法
• vue+element实现表格新增、编辑、删除功能
• vue+element-ui实现表格编辑的三种实现方式
• VUE+Element UI实现简单的表格行内编辑效果的示例的代码
• vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
• vue+iview 实现可编辑表格的示例代码
• 对Vue table 动态表格td可编辑的方法详解
• Vue封装的可编辑表格插件方法
• Vue.js实现可编辑的表格