el-table 编辑整行

  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
   <script>
       //id生成工具,模拟后台返回的id
       var generateId = {
           _count: 1,
           get(){return ((+new Date()) + "_" + (this._count++))}
       };
       //主要内容
       var app = new Vue({
           el: "#app",
           data: {
               master_user: {
                   sel: null,//选中行   
                   columns: [
                       { field: "type", title: "远程类型", width: 120 },
                       { field: "addport", title: "连接地址", width: 150 },
                       { field: "user", title: "登录用户", width: 120 },
                       { field: "pwd", title: "登录密码", width: 220 },
                       { field: "info", title: "其他信息" }
                   ],
                   data: [],
               },
           },
           methods: {
               //读取表格数据
               readMasterUser() {
                   //根据实际情况，
                   app.master_user.data.map(i => {
                       i.id = generateId.get();//模拟后台插入成功后有了id
                       i.isSet=false;//给后台返回数据添加`isSet`标识
                       return i;
                   });
               },
               //添加账号
               addMasterUser() {
                   for (let i of app.master_user.data) {
                       if (i.isSet) return app.$message.warning("请先保存当前编辑项");
                   }
                   let j = { id: 0, "type": "", "addport": "", "user": "", "pwd": "", "info": "", "isSet": true, "_temporary": true };
                   app.master_user.data.push(j);
                   app.master_user.sel = JSON.parse(JSON.stringify(j));
               },
               //修改
               pwdChange(row, index, cg) {
                   //点击修改 判断是否已经保存所有操作
                   for (let i of app.master_user.data) {
                       if (i.isSet && i.id != row.id) {
                           app.$message.warning("请先保存当前编辑项");
                           return false;
                       }
                   }
                   //是否是取消操作
                   if (!cg) {
                       if (!app.master_user.sel.id) app.master_user.data.splice(index, 1);
                       return row.isSet = !row.isSet;
                   }
                   //提交数据
                   if (row.isSet) {
                       //项目是模拟请求操作  自己修改下
                       (function () {
                           let data = JSON.parse(JSON.stringify(app.master_user.sel));
                           for (let k in data) row[k] = data[k];
                           app.$message({
                               type: 'success',
                               message: "保存成功!"
                           });
                           //然后这边重新读取表格数据
                           app.readMasterUser();
                           row.isSet = false;
                       })();
                   } else {
                       app.master_user.sel = JSON.parse(JSON.stringify(row));
                       row.isSet = true;
                   }
               }
           }
       });
   </script>