<!DOCTYPE html>

 <html >

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Demo</title>

     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

     <style>

         .el-table-add-row {

     margin-top: 10px;

     width: 100%;

     height: 34px;

     border: 1px dashed #c1c1cd;

     border-radius: 3px;

     cursor: pointer;

     justify-content: center;

     display: flex;

     line-height: 34px;

 }</style>

 </head>

 <body>

     <div id="app">

         <el-row>

             <el-col span="24">

                 <el-table size="mini" :data="master_user.data" border style="width: 100%" highlight-current-row>

                     <el-table-column type="index"></el-table-column>

                     <el-table-column v-for="(v,i) in master_user.columns" :prop="v.field" :label="v.title" :width="v.width">

                         <template slot-scope="scope">

                             <span v-if="scope.row.isSet">

                                 <el-input size="mini" placeholder="请输入内容" v-model="master_user.sel[v.field]">

                                 </el-input>

                             </span>

                             <span v-else>{{scope.row[v.field]}}</span>

                         </template>

                     </el-table-column>

                     <el-table-column label="操作" width="100">

                         <template slot-scope="scope">

                             <span class="el-tag el-tag--info el-tag--mini" style="cursor: pointer;" @click="pwdChange(scope.row,scope.$index,true)">

                                 {{scope.row.isSet?'保存':"修改"}}

                             </span>

                             <span v-if="!scope.row.isSet" class="el-tag el-tag--danger el-tag--mini" style="cursor: pointer;">

                                 删除

                             </span>

                             <span v-else class="el-tag  el-tag--mini" style="cursor: pointer;" @click="pwdChange(scope.row,scope.$index,false)">

                                 取消

                             </span>

                         </template>

                     </el-table-column>

                 </el-table>

             </el-col>

             <el-col span="24">

                 <div class="el-table-add-row" style="width: 99.2%;" @click="addMasterUser()"><span>+ 添加</span></div>

             </el-col>

         </el-row>

     </div>

     <!-- import Vue before Element -->

     <script src="https://unpkg.com/vue@2.5.17/dist/vue.min.js"></script>

     <!-- import JavaScript -->

     <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>

 </body>

 </html>

ElementUI table 点击编辑按钮进行编辑实现示例的更多相关文章

  1. element-ui table 点击分页table滚动到顶部

    在做项目中,碰到一个问题,table加了固定头,内容可滚动,当滚到table底边时,点击分页后还在底边 解决方法:设置table的 ref='multipleTable' //切换分页的方法加上下面这 ...

  2. Ubuntu 18.04中截图工具Shutter的编辑按钮不可用的解决办法

    Shutter是一个由第三方提供的在Ubuntu上运行的截图工具,相对于系统自带的截图工具(默认可通过Ctrl + Shift + Print快捷键启动截图),最大的优点就是可以即时对图片进行编辑,在 ...

  3. corethink功能模块探索开发（十四）后台编辑按钮

    效果图: 1.添加下图55&58行代码 2.实现edit方法 位于Equip/Admin/DeviceRepaireAdmin.class.php中 public function edit( ...

  4. 【jquery】【ztree】节点添加自定义按钮、编辑和删除事件改成自己定义事件

    setting添加 edit: { drag: { isCopy: false, isMove: true }, enable: true,//设置是否处于编辑状态 showRemoveBtn: sh ...

  5. Odoo 配置快速创建编辑按钮

    对于Man2one类型的数据,我们知道,form view中总会显示出一个尾巴似的"create and edit"和一个快速创建的机制,有时候业务人员一不小心就容易创建一个新的行 ...

  6. odoo开发笔记 -- odoo10 视图界面根据字段状态，动态隐藏创建&编辑按钮

    场景描述: 解决方式: 网络搜索,vnsoft_form_hide_edit 找到了这个odoo8的模块, odoo10语法和视图界面有新的变化,所以需要修改一些地方,感兴趣的小伙伴可以对比下两个代码 ...

  7. 点击EditText可编辑，点击其他地方不可编辑

    我是在Fragment中实现的,在网上查了,有的说要回调Activity的onTouch事件,通过实验直接在Fragment中即可.如下: 我的EditText在ScrollView,因为Scroll ...

  8. 在使用element-ui搭建的表格中,实现点击"定位"按钮后,屏幕滚动到对应行的位置

    背景: 一个后台管理系统,当管理员登录之后,会存在一个自己的id值, 在一个表格中,当点击"定位"按钮后,屏幕滚动到拥有管理员id的这一行,并且给设置一个高亮的背景 相关知识点: ...

  9. RFS_点击button按钮之后，RFS出现卡死的问题

    [html代码] <html> <head> <title> 主窗口 </title> </head> <body> <d ...

随机推荐

  1. nginx代理跨域，根据路径参数改变目标服务器地址

    我们都知道nginx是可以做跨域代理的: location ^~ /visited-path/ { proxy_pass http://another-domain/; } 举个例子:假如我们的代理服 ...

  2. shell脚本exercise2

    通过文件里面的网址,判断是否访问成功网址 #!/bin/bash check(){ code=`curl -I -m -o /dev/null -s -w %{http_code} http://$u ...

  3. netty的调优-及-献上写过注释的源码工程

    Netty能干什么? Http服务器 使用Netty可以编写一个 Http服务器, 就像tomcat那样,能接受用户发送的http请求, , 只不过没有实现Servelt规范, 但是它也能解析携带的参 ...

  4. Python如何爬取实时变化的WebSocket数据

    一.前言 作为一名爬虫工程师,在工作中常常会遇到爬取实时数据的需求,比如体育赛事实时数据.股市实时数据或币圈实时变化的数据.如下图: Web 领域中,用于实现数据'实时'更新的手段有轮询和 WebSo ...

  5. mysql——中文数字排序的实现(FIELD)

    今天遇到一个需求,要求排序输出网格信息,但是数据是第三方对接插入的,并没有给我们排好顺序.所以只能自己动手了. 下图是原数据: 我们需要将其升序输出.使用mysql中的函数FIELD.语法如下: SE ...

  6. ggplot2|玩转Manhattan图-你有被要求这么画吗？

    本文首发于“生信补给站”,ggplot2|玩转Manhattan图-你有被要求这么画吗?更多关于R语言,ggplot2绘图,生信分析的内容,敬请关注小号. Manhattan图算是GWAS分析的标配图 ...

  7. 用C在GBA上写光线追踪（0）配置开发编译环境

    前段时间用C#写了一个光线追踪程序,可以渲染圆球,平面这种基本图形,反射,光照,阴影,都大致尝试做了一下. ↑ C#实现的光线追踪     ↑ GBA上C实现的光线追踪 然而,在我打算继续深入优化的时 ...

  8. UVA-10391 Compoud Words

    You are to find all the two-word compound words in a dictionary. A two-word compound word is a word ...

  9. git 设置和取消指定域名代理 - git config proxy

    Firstly - Check Check if U have global .gitconfig file 检查是否有全局 .gitconfig 文件 Usually global .gitconf ...

  10. 20.DjangoRestFramework学习三之认证组件、权限组件、频率组件、url注册器、响应器、分页组件

    一 认证组件 1. 局部认证组件 我们知道,我们不管路由怎么写的,对应的视图类怎么写的,都会走到dispatch方法,进行分发, 在咱们看的APIView类中的dispatch方法的源码中,有个sel ...