<script src="https://unpkg.com/element-ui/lib/index.js"></script>
   <script>
       //id生成工具,模擬后臺返回的id
       var generateId = {
           _count: 1,
           get(){return ((+new Date()) + "_" + (this._count++))}
       };
       //主要內(nèi)容
       var app = new Vue({
           el: "#app",
           data: {
               master_user: {
                   sel: null,//選中行   
                   columns: [
                       { field: "type", title: "遠(yuǎn)程類型", width: 120 },
                       { field: "addport", title: "連接地址", width: 150 },
                       { field: "user", title: "登錄用戶", width: 120 },
                       { field: "pwd", title: "登錄密碼", width: 220 },
                       { field: "info", title: "其他信息" }
                   ],
                   data: [],
               },
           },
           methods: {
               //讀取表格數(shù)據(jù)
               readMasterUser() {
                   //根據(jù)實(shí)際情況，
                   app.master_user.data.map(i => {
                       i.id = generateId.get();//模擬后臺插入成功后有了id
                       i.isSet=false;//給后臺返回?cái)?shù)據(jù)添加`isSet`標(biāo)識
                       return i;
                   });
               },
               //添加賬號
               addMasterUser() {
                   for (let i of app.master_user.data) {
                       if (i.isSet) return app.$message.warning("請先保存當(dāng)前編輯項(xiàng)");
                   }
                   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) {
                   //點(diǎn)擊修改 判斷是否已經(jīng)保存所有操作
                   for (let i of app.master_user.data) {
                       if (i.isSet && i.id != row.id) {
                           app.$message.warning("請先保存當(dāng)前編輯項(xiàng)");
                           return false;
                       }
                   }
                   //是否是取消操作
                   if (!cg) {
                       if (!app.master_user.sel.id) app.master_user.data.splice(index, 1);
                       return row.isSet = !row.isSet;
                   }
                   //提交數(shù)據(jù)
                   if (row.isSet) {
                       //項(xiàng)目是模擬請求操作  自己修改下
                       (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: "保存成功!"
                           });
                           //然后這邊重新讀取表格數(shù)據(jù)
                           app.readMasterUser();
                           row.isSet = false;
                       })();
                   } else {
                       app.master_user.sel = JSON.parse(JSON.stringify(row));
                       row.isSet = true;
                   }
               }
           }
       });
   </script>