ElementUI table 点击编辑按钮进行编辑实现示例

 

  1 <!DOCTYPE html>
  2 <html >
  3 
  4 <head>
  5     <meta charset="UTF-8">
  6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8     <title>Demo</title>
  9     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
 10     <style>
 11         .el-table-add-row {
 12     margin-top: 10px;
 13     width: 100%;
 14     height: 34px;
 15     border: 1px dashed #c1c1cd;
 16     border-radius: 3px;
 17     cursor: pointer;
 18     justify-content: center;
 19     display: flex;
 20     line-height: 34px;
 21 }</style>
 22 </head>
 23 
 24 <body>
 25     <div id="app">
 26         <el-row>
 27             <el-col span="24">
 28                 <el-table size="mini" :data="master_user.data" border style="width: 100%" highlight-current-row>
 29                     <el-table-column type="index"></el-table-column>
 30                     <el-table-column v-for="(v,i) in master_user.columns" :prop="v.field" :label="v.title" :width="v.width">
 31                         <template slot-scope="scope">
 32                             <span v-if="scope.row.isSet">
 33                                 <el-input size="mini" placeholder="请输入内容" v-model="master_user.sel[v.field]">
 34                                 </el-input>
 35                             </span>
 36                             <span v-else>{{scope.row[v.field]}}</span>
 37                         </template>
 38                     </el-table-column>
 39                     <el-table-column label="操作" width="100">
 40                         <template slot-scope="scope">
 41                             <span class="el-tag el-tag--info el-tag--mini" style="cursor: pointer;" @click="pwdChange(scope.row,scope.$index,true)">
 42                                 {{scope.row.isSet?'保存':"修改"}}
 43                             </span>
 44                             <span v-if="!scope.row.isSet" class="el-tag el-tag--danger el-tag--mini" style="cursor: pointer;">
 45                                 删除
 46                             </span>
 47                             <span v-else class="el-tag  el-tag--mini" style="cursor: pointer;" @click="pwdChange(scope.row,scope.$index,false)">
 48                                 取消
 49                             </span>
 50                         </template>
 51                     </el-table-column>
 52                 </el-table>
 53             </el-col>
 54             <el-col span="24">
 55                 <div class="el-table-add-row" style="width: 99.2%;" @click="addMasterUser()"><span>+ 添加</span></div>
 56             </el-col>
 57         </el-row>
 58 
 59     </div>
 60     <!-- import Vue before Element -->
 61     <script src="https://unpkg.com/vue@2.5.17/dist/vue.min.js"></script>
 62     <!-- import JavaScript -->
 63     <script src="https://unpkg.com/element-ui/lib/index.js"></script>
 64     <script>
 65         //id生成工具 这个不用看 示例而已 模拟后台返回的id
 66         var generateId = {
 67             _count: 1,
 68             get(){return ((+new Date()) + "_" + (this._count++))}
 69         };
 70         //主要内容
 71         var app = new Vue({
 72             el: "#app",
 73             data: {
 74                 master_user: {
 75                     sel: null,//选中行   
 76                     columns: [
 77                         { field: "type", title: "远程类型", width: 120 },
 78                         { field: "addport", title: "连接地址", width: 150 },
 79                         { field: "user", title: "登录用户", width: 120 },
 80                         { field: "pwd", title: "登录密码", width: 220 },
 81                         { field: "info", title: "其他信息" }
 82                     ],
 83                     data: [],
 84                 },
 85             },
 86             methods: {
 87                 //读取表格数据
 88                 readMasterUser() {
 89                     //根据实际情况,自己改下啊 
 90                     app.master_user.data.map(i => {
 91                         i.id = generateId.get();//模拟后台插入成功后有了id
 92                         i.isSet=false;//给后台返回数据添加`isSet`标识
 93                         return i;
 94                     });
 95                 },
 96                 //添加账号
 97                 addMasterUser() {
 98                     for (let i of app.master_user.data) {
 99                         if (i.isSet) return app.$message.warning("请先保存当前编辑项");
100                     }
101                     let j = { id: 0, "type": "", "addport": "", "user": "", "pwd": "", "info": "", "isSet": true, "_temporary": true };
102                     app.master_user.data.push(j);
103                     app.master_user.sel = JSON.parse(JSON.stringify(j));
104                 },
105                 //修改
106                 pwdChange(row, index, cg) {
107                     //点击修改 判断是否已经保存所有操作
108                     for (let i of app.master_user.data) {
109                         if (i.isSet && i.id != row.id) {
110                             app.$message.warning("请先保存当前编辑项");
111                             return false;
112                         }
113                     }
114                     //是否是取消操作
115                     if (!cg) {
116                         if (!app.master_user.sel.id) app.master_user.data.splice(index, 1);
117                         return row.isSet = !row.isSet;
118                     }
119                     //提交数据
120                     if (row.isSet) {
121                         //项目是模拟请求操作  自己修改下
122                         (function () {
123                             let data = JSON.parse(JSON.stringify(app.master_user.sel));
124                             for (let k in data) row[k] = data[k];
125                             app.$message({
126                                 type: 'success',
127                                 message: "保存成功!"
128                             });
129                             //然后这边重新读取表格数据
130                             app.readMasterUser();
131                             row.isSet = false;
132                         })();
133                     } else {
134                         app.master_user.sel = JSON.parse(JSON.stringify(row));
135                         row.isSet = true;
136                     }
137                 }
138             }
139         });
140     </script>
141 </body>
142 
143 </html>

 

posted @ 2019-08-09 10:04 丰寸 阅读(...) 评论(...) 编辑 收藏