el-tabel表格内编辑

任意行.png

  

          
            
            
              
            
            
              
            
          
          
+ 添加
        

data:

 studentForm: {
          sel: null,//选中行
          columns: [
            { field: "name", title: "名字",},
            { field: "relationship", title: "关系" },
            { field: "parentMobile", title: "家长手机"},
            { field: "parentWechat", title: "微信号" },
          ],
          data: [],
        },

methods:

   //嵌套的 Dialog读取表格数据
      readMasterUser() {
        //根据实际情况，自己改下啊
        this.form.parents.map(i => {
          i.isSet=false;//给后台返回数据添加`isSet`标识
          return i;
        });
      },
      //嵌套的 Dialog添加
      addMasterUser() {
        for (let i of this.form.parents) {
          if (i.isSet) return this.$message.warning("请先保存当前编辑项");
        }
        let j = {"name": "", "relationship": "", "parentMobile": "", "parentWechat": "", "isSet": true};
        this.form.parents.push(j);
        this.studentForm.sel = JSON.parse(JSON.stringify(j));
      },
      //嵌套的 Dialog修改
      parentChange(row, index, cg) {
        //点击修改 判断是否已经保存所有操作
        for (let i of this.form.parents) {
          if (i.isSet && i.id != row.id) {
            this.$message.warning("请先保存当前编辑项");
            return false;
          }
        }
        //是否是取消操作
        if (!cg) {
          if (!this.studentForm.sel.id) this.form.parents.splice(index, 1);
          return row.isSet = !row.isSet;
        }
        //提交数据
        if (row.isSet) {
          //项目是模拟请求操作  自己修改下
          let self = this;
          (function () {
            let data = JSON.parse(JSON.stringify(self.studentForm.sel));
            for (let k in data) row[k] = data[k];
//            self.$message({
//              type: 'success',
//              message: "保存成功"
//            });
            //然后这边重新读取表格数据
            self.readMasterUser();
            row.isSet = false;
          })();
        } else {
          this.studentForm.sel = JSON.parse(JSON.stringify(row));
          row.isSet = true;
        }
      },
      //嵌套的 Dialog删除
      removeMsg(a,index) {
        this.form.parents.splice(index, 1)
      },

以上是自己改的，下面是COPY度娘的