element的表格index自定义_vue+element-ui实现表格编辑的三种实现方式
1、表格内部显示和编辑切换
这种方式就是利用两个标签显示隐藏来实现,我们这里用input和span,正常用span将数据显示,点击编辑时,将span隐藏,显示input进行编辑。选中当前行我们可以通过slot-scope中的index去实现,在控制显示隐藏的属性上绑定index就可以选中当前行了,如showEdit[index]。
页面结构代码:
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
header-align="center">
{{$index + 1}}
{{row.Name}}
fixed="right"
label="操作"
width="100"
header-align="center">
更新
取消
编辑
删除
初始化data:
data() {
return {
showEdit: [], //显示编辑框
showBtn: [],
showBtnOrdinary: true
}
}
实现方法:
//点击编辑
handleEdit(index, row) {
this.showEdit[index] = true;
this.showBtn[index] = true;
this.$set(this.showEdit,row,true)
this.$set(this.showBtn,row,true)
},
//取消编辑
handelCancel(index, row) {
this.getContentList();
this.showEdit[index] = false;
this.showBtn[index] = false;
},
//点击更新
handleUpdate(formName) {
},
//点击删除
handleDelete(index, row) {
},
初始化的时候最好给数组遍历赋值
for(var i = 0; i < 100; i ++) {
this.showEdit[i] = false;
this.showBtn[i] = false;
this.$set(vm.showEdit[i], false);
this.$set(vm.showBtn[i], false);
}
另外还可以给row自身添加一个属性,通过row.showEdit来控制每一行的编辑。上面说的这些在我的开发环境实现一点问题都没有,但是测试出来了很多bug(没反应、点击第一次第二次没反应等),后来又查询了一下vue的官方文档“异步队列更新”,可能需要加一个Vue.nextTick(callback)。项目比较紧换了另外一种实现方式。有兴趣的小伙伴可以看看官方文档:https://cn.vuejs.org/v2/guide/reactivity.html
2、通过弹出另外一个表格编辑
另外,github上还有实现的代码,不知道是不是同一个人,为了尊重原创,地址都放在这里:https://github.com/Recklesslmz/elementUI
这种方式实现就简单多了,初始化table代码同上,但是可以去掉input编辑框,和showEdit属性,还需要创建一个隐藏的dialog,里面放另外一张表单:
:visible.sync="editFormVisible"
:close-on-click-modal="false"
class="edit-form"
:before-close="handleClose">
取消
更新
初始化data:
editFormVisible: false, //默认不显示编辑弹层
方法:
//点击编辑
handleEdit(index, row) {
this.editFormVisible = true;
this.editForm = Object.assign({}, row); //这句是关键!!!
},
//点击关闭dialog
handleClose(done) {
/*done();
location.reload();*/
this.editFormVisible = false;
},
//点击取消
handleCancel(formName) {
this.editFormVisible = false;
},
//点击更新
handleUpdate(forName) {
//更新的时候就把弹出来的表单中的数据写到要修改的表格中
var postData = {
name: this.editForm.name;
}
//这里再向后台发个post请求重新渲染表格数据
this.editFormVisible = false;
}
3.直接通过样式控制
element-ui中的表格鼠标选中行的时候,行class会自动添加一个current-row,所以通过设置这个class控制编辑和不可编辑标签的显示隐藏。具体参考: https://www.jb51.net/article/149877.htm
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
element的表格index自定义_vue+element-ui实现表格编辑的三种实现方式相关推荐
- Web框架之Django_07 进阶操作(MTV与MVC、多对多表三种创建方式、前后端传输数据编码格式contentType、ajax、自定义分页器)
阅读目录 一.MVC与MTV 二.多对多表的创建 三.ajax,前后端传输编码格式contentType 四.批量插入数据与自定义分页器 摘要 MTV与MVC 多对多表三种创建方式 ajax ,前后端 ...
- Kotlin实战练习——自定义圆形图片三种实现方式
Kotlin实战练习--自定义圆形图片三种实现方式 前言 如今Kotlin越来越重要,本人也开始了Kotlin的学习.为了检测学习效果,加深学习印象,同时回顾一下以前的一些知识点,决定从写一个自定义圆 ...
- FME教程:表格数据分组统计总数的三种实现方式
在FME中进行表格数据分组统计总数的三种方式,实现类似SQL中分组统计总数的功能. 一.业务场景 现在有图1所示的一份Excel表格数据,要求统计每个村的户数,如图2所示. 图1 Excel表格数据 ...
- 自定义View的三种实现方式及自定义属性使用介绍
自定义View的三种实现方式及自定义属性使用介绍 一 前言 二 三种自定义控件的方法 2.1 组合控件 2.2 继承控件 2.2.1 继承View类系统控件 2.2.2 继承ViewGroup类系统控 ...
- html制作不均匀表格,HTML自定义JUnit报告不均匀表格对齐
我正在编写一个java类,它为JUnit测试生成HTML表格报告并使用CSS进行可视化格式化.我有一个对齐单元格的问题,因为生成的柱面数量是不可预测的,因为其中一些列表示传递给可变参数函数的参数.因此 ...
- vue 实例化几种方式_Vue组件的三种调用方式
最近在写fj-service-system的时候,遇到了一些问题.那就是我有些组件,比如Dialog.Message这样的组件,是引入三方组件库,比如element-ui这样的,还是自己实现一个?虽然 ...
- easyui数据表格重置_数据库三种删除方式
第一种 使用delete 语句 特点: delete 属于数据库操纵语言DML,表示删除表中的数据, 删除过程是每次从表中删除一行,并把该行删除操作作为事务记录在日志中保存 可以配合事件(transa ...
- 线程池三种创建方式和自定义线程池ThreadPoolExecutor
线程池的优势: 线程池做的工作只要是控制运行的线程数量,处理过程中将任务放入队列,然后在线程创建后启动这些任务,如果线程数量超过了最大数量,超出数量的线程排队等候,等其他线程执行完毕,再从队列中取出任 ...
- 阿里云服务器的三种购买方式(活动、一键、自定义购买)
阿里云是国内最知名的云服务器商,凭借着稳定,技术可靠和安全方面的优势成为了国内用户购买云服务器的首选服务商.阿里云服务器可以通过一键购买.自定义购买和活动购买三种方式去购买.现在来详细介绍下这几种购买 ...
最新文章
- 怎么修改CAD编辑器中默认的线型
- matlab pca 测试样本,matlab_PCA,训练集与测试集分开,原理和用法
- Android MediaPlayer
- 50 亿观众的 “云上奥运”,顶级媒体背后的数智化力量
- 个人随笔-《江城子·驻西航》
- 判断 服务器架构性能 数据,服务器架构之性能扩展-第五章(6)
- 作业2 分支循环结构
- C# GDI+ 实现图片分隔
- 前端学习(1179):vue概述
- 中国紧凑型玻璃垫圈行业市场供需与战略研究报告
- river歌曲表达的意思_闽南语歌曲《欢喜就好》详解
- 想用数据库“读写分离”,请先明白“读写分离”解决什么问题
- java通过密钥得到谷歌验证码
- sitemesh2.4
- pdf阅读,保存上次阅读位置
- js 实现当有省略号时,显示title,无省略号不显示title
- Some file crunching failed, see logs for details 一种情形的解决办法
- logstash 配置
- 分享在实际项目中积累的硬件调试经验 - 调试方法,以及常见调试案例
- web项目上云_联想Filez—携手浙江中烟,发力“云”端,打造“烟草上云”新势能...
热门文章
- ios客户端做屏蔽_Transmission 屏蔽迅雷反吸血脚本
- php 变量 长度,php 怎么计算字符串长度
- 手机距离传感器坏了有什么影响_适合手机兼职的工作有什么影响吗
- java日期算前一天_java 根据系统日期获取前一天、后一天时间(根据初始日期推算出期望(向前/向后)日期)...
- c++byte数组和文件的相互转换_经常对文件相互转换,全能转换工具,解决办公中遇到的所有难题...
- 20145308刘昊阳 20145302张薇《信息安全系统设计基础》实验五:网络通信 实验报告...
- poj 1050(DP)
- VC++2012编程演练数据结构《35》多路平衡归并
- GNU make manual 翻译(八十二)
- 怎么用计算机弹that girl,抖音使用教程 抖音that girl 歌曲歌词介绍