ElementUI table 点击编辑按钮进行编辑实现示例
<!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 点击编辑按钮进行编辑实现示例的更多相关文章
- element-ui table 点击分页table滚动到顶部
在做项目中,碰到一个问题,table加了固定头,内容可滚动,当滚到table底边时,点击分页后还在底边 解决方法:设置table的 ref='multipleTable' //切换分页的方法加上下面这 ...
- Ubuntu 18.04中截图工具Shutter的编辑按钮不可用的解决办法
Shutter是一个由第三方提供的在Ubuntu上运行的截图工具,相对于系统自带的截图工具(默认可通过Ctrl + Shift + Print快捷键启动截图),最大的优点就是可以即时对图片进行编辑,在 ...
- corethink功能模块探索开发（十四）后台编辑按钮
效果图: 1.添加下图55&58行代码 2.实现edit方法 位于Equip/Admin/DeviceRepaireAdmin.class.php中 public function edit( ...
- 【jquery】【ztree】节点添加自定义按钮、编辑和删除事件改成自己定义事件
setting添加 edit: { drag: { isCopy: false, isMove: true }, enable: true,//设置是否处于编辑状态 showRemoveBtn: sh ...
- Odoo 配置快速创建编辑按钮
对于Man2one类型的数据,我们知道,form view中总会显示出一个尾巴似的"create and edit"和一个快速创建的机制,有时候业务人员一不小心就容易创建一个新的行 ...
- odoo开发笔记 -- odoo10 视图界面根据字段状态，动态隐藏创建&编辑按钮
场景描述: 解决方式: 网络搜索,vnsoft_form_hide_edit 找到了这个odoo8的模块, odoo10语法和视图界面有新的变化,所以需要修改一些地方,感兴趣的小伙伴可以对比下两个代码 ...
- 点击EditText可编辑，点击其他地方不可编辑
我是在Fragment中实现的,在网上查了,有的说要回调Activity的onTouch事件,通过实验直接在Fragment中即可.如下: 我的EditText在ScrollView,因为Scroll ...
- 在使用element-ui搭建的表格中,实现点击"定位"按钮后,屏幕滚动到对应行的位置
背景: 一个后台管理系统,当管理员登录之后,会存在一个自己的id值, 在一个表格中,当点击"定位"按钮后,屏幕滚动到拥有管理员id的这一行,并且给设置一个高亮的背景 相关知识点: ...
- RFS_点击button按钮之后，RFS出现卡死的问题
[html代码] <html> <head> <title> 主窗口 </title> </head> <body> <d ...
随机推荐
- OSI-传输层
OSI-传输层 端口号(2字节 SYN(1bit) ACK(1bit) 会话多路复用(为什么一个IP地址可以做很多事情?) 源端口地址可以不同 五元组(世界上没有相同的2个五元组) 源IP地址-目的I ...
- apache虚拟主机配置的3种方式
Apache的虚拟主机功能 (Virtual Host) 是可以让一台服务器基于IP.主机名或端口号实现提供多个网站服务的技术. 下面我介绍一下这3种方式具体的配置流程: 一.基于ip地址 首先我们需 ...
- hadoop环境的安装 和 spark环境的安装
hadoop环境的安装1.前提:安装了java spark环境的安装1.前提:安装了java,python2.直接pip install pyspark就可以安装完成.(pip是python的软件安装 ...
- Mac系统安装文件提示文件已损坏，打不开解决办法
Mac系统安装文件提示文件已损坏,打不开解决办法: 修改系统配置:系统偏好设置 - 安全性与隐私 - 任何来源”.如果没有“任何来源”这个选项,是因为你的系统是macOS Sierra 10.12,苹 ...
- 构建一个flink程序,从kafka读取然后写入MYSQL
最近flink已经变得比较流行了,所以大家要了解flink并且使用flink.现在最流行的实时计算应该就是flink了,它具有了流计算和批处理功能.它可以处理有界数据和无界数据,也就是可以处理永远生产 ...
- 【限时免费】从入门到实战，5节课玩转Kafka！赢音箱、书籍好礼！
欢迎添加华为云小助手微信(微信号:HWCloud002 或 HWCloud003),输入关键字"加群",加入华为云线上技术讨论群:输入关键字"最新活动",获取华 ...
- 大规模机器学习在LinkedIn预测模型中的应用实践
预测模型在 LinkedIn 的产品中被广泛应用,如 Feed.广告.工作推荐.邮件营销.用户搜索等.这些模型在提升用户体验时起到了重要的作用.为了满足建模需求,LinkedIn 开发并且开源了 Ph ...
- 客户端加载文本数据到mysql数据库表(数据导入和导出)
load data local infile "文件绝对路径" into table 表名; 如果指定了LOCAL,则文件会被客户主机上的客户端读取,并被发送到服务器 如果要导出表 ...
- 【django后端分离】rbac组件（文件源代码+使用）
1:用户,角色,权限,菜单表设计 from django.db import models # 用户菜单 class UserMenu(models.Model): title = models.Ch ...
- 大数据之Linux基础
回顾这一个多月以来闭关学大数据的一些相关重要知识,就当复习,顺便以备以后查看 Linux学习第一步自然是安装Linux. 关于Linux 首先介绍下Linux,Linux系统很多程序员开发者其实都耳熟 ...