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 ...
随机推荐
- linux免密登录和设置别名
一.免密登录 (1) 配置公钥 ssh-keygen (2)让远程服务器记住公钥 ssh-copy-id 用户名@ip地址或域名 二.设置别名 (3)在~/.ssh目录下创建并编辑conf ...
- MQTT版本升级过程及源码解析
MQTT版本升级过程及源码解析 首先说一下为什么要写这篇文章呢,在我发现网上对MQTT的文章介绍实在太少了,可能也是使用这个的频率比较低吧!还有对问题的定位以及解决的方式和办法也太少了,所以特意写这篇 ...
- 动态规划--最长上升子序列(LIS)的长度
l例如:对于[3,1,4,2,5],最长上升子序列的长度是3 arr = [3,1,4,5,9,2,6,5,0] def lis(arr): #dp[i]表示第i个位置的值为尾的数组的最长递增子序列的 ...
- 微信小程序——动态修改页面数据(和样式)及参数传递
1.1.1动态修改页面数据 在小程序中我们经常要动态渲染数据,对于新手而言我们常常遇到修改的数据在控制台显示和页面显示不一致,因为我们用“=”修改数据的,这种是可以修改,但无法改变页面的状态的,还会造 ...
- Xcode 10 Error: Multiple commands produce
目录 Xcode 9.4.1运行react-native 可以,但是在Xcode 10运行报错,报错信息如下: 解决方法 1. 选择 File > Project Settings (或者 Fi ...
- 放大镜效果 －－－ enlarge.js
html页面: 注释:遮罩层的大小取决于 ＝＝＝>layerwidth/layerheight = largewidth/largeheight enlarge.js页面 /* jqu ...
- 地兵布阵 -----------HDU-1166
C国的死对头A国这段时间正在进行军事演习,所以C国间谍头子Derek和他手下Tidy又开始忙乎了.A国在海岸线沿直线布置了N个工兵营地,Derek和Tidy的任务就是要监视这些工兵营地的活动情况.由于 ...
- 曹工说Spring Boot源码系列开讲了（1）-- Bean Definition到底是什么，附spring思维导图分享
写在前面的话&&About me 网上写spring的文章多如牛毛,为什么还要写呢,因为,很简单,那是人家写的:网上都鼓励你不要造轮子,为什么你还要造呢,因为,那不是你造的. 我不是要 ...
- linux需要了解的网络基础知识
第1章 网络命令 1.1 用户模式下的命令 1.1.1 enable切换到特权模式 Router>enable Router# 特权模式 Router# Router# 1.2 特权模式下的命令 ...
- python之pymysql模块简单应用
众所周知,想要在python程序中执行SQL语句需要使用第三方模块:pymysql. 下面,我将为大家简述一下pymysql第三方库的安装到使用的大体流程. pymysql的安装 1.windows系 ...