vue+element-ui实现表格编辑
三种实现方式
1、表格内部显示和编辑切换
这种方式就是利用两个标签显示隐藏来实现,我们这里用input和span,正常用span将数据显示,点击编辑时,将span隐藏,显示input进行编辑。选中当前行我们可以通过slot-scope中的index去实现,在控制显示隐藏的属性上绑定index就可以选中当前行了,如showEdit[index]。
页面结构代码:
<el-table:data="tableData"tooltip-effect="dark"style="width: 100%"header-align="center"><el-table-column width="50" header-align="center"><template slot-scope="{row,$index}"><span>{{$index + 1}}</span></template></el-table-column><el-table-column label="名称" prop="Name" width="300" header-align="center"><template slot-scope="{row,$index}"><input class="edit-cell" v-if="showEdit[$index]" v-model="row.Name"><span v-if="!showEdit[$index]">{{row.Name}}</span></template></el-table-column><el-table-columnfixed="right"label="操作"width="100"header-align="center"><template slot-scope="{row,$index}"><el-button type="text" size="small" @click.native="handleUpdate($index, row)" v-if="showBtn[$index]">更新</el-button><el-button type="text" size="small" @click.native="handleCancel($index, row)" v-if="showBtn[$index]">取消</el-button><el-button type="text" size="small" @click.native="handleEdit($index, row)" v-if="!showBtn[$index]">编辑</el-button><el-button type="text" size="small" @click.native="handleDelete($index, row)" v-if="!showBtn[$index]">删除</el-button></template></el-table-column>
</el-table>
初始化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、通过弹出另外一个表格编辑
这个是网上找的一篇文章去实现的,原文链接:https://blog.csdn.net/caixiaodaohaha/article/details/79212264
另外,github上还有实现的代码,不知道是不是同一个人,为了尊重原创,地址都放在这里:https://github.com/Recklesslmz/elementUI
这种方式实现就简单多了,初始化table代码同上,但是可以去掉input编辑框,和showEdit属性,还需要创建一个隐藏的dialog,里面放另外一张表单:
<el-dialog title="编辑":visible.sync="editFormVisible":close-on-click-modal="false"class="edit-form":before-close="handleClose"><el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm"><el-form-item label="名称" prop="Name"><el-input v-model="editForm.name" auto-complete="off"></el-input></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click.native="handleCancel('editForm')">取消</el-button><el-button type="primary" @click.native="handleUpdate('editForm')">更新</el-button></div>
</el-dialog>
初始化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.jianshu.com/p/79f39f2c1382
关注微博、微信公众号搜索前端小木,让我们一起学习成长。
vue+element-ui实现表格编辑相关推荐
- vue element ui合并表格(合并某列的行数据)
需求:按需合并某些列的数据 自定义数据: tableData:[ { num:0, new_subject_name:"new_subject_name1", count1:&qu ...
- vue表单中批量导入功能_vue实战(11)——vue+element UI实现表格数据导出Excel功能
一.应用场景 按照需求导出功能分为勾选批量导出及按照查询结果导出,考虑到接口操作导出的复杂性,因此实现了js控制导出的功能 导出功能截图 二.安装相关依赖 cnpm install --save xl ...
- 【前端】Vue+Element UI案例:通用后台管理系统-用户管理:Table表格增删查改、Pagination分页、搜索框
文章目录 目标 代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式 总 ...
- Vue Element UI 表格组件 利用插槽实现按下按钮后获得本行数据(内容)
Vue Element UI 表格组件 利用插槽实现按下按钮后获得本行数据(内容) 能够解决的问题 需要在表格中添加一个类似修改或编辑的按钮,按下按钮,弹出的窗口需要本行的渲染数据 需要向服务端提交一 ...
- 【vue】Element UI实现表格表头纵向显示
element实现表格表头纵向显示 我们正常使用Element UI写表格的时候,<el-table-column/> 标签里面都是纵向的.那么我们的需求有时候会要求行列转换,那么来看看咋 ...
- 【前端】Vue+Element UI案例:通用后台管理系统-用户管理:Form表单填写、Dialog对话框弹出
文章目录 目标 代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...
- Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
这篇博客主要介绍树形控件的两个小小的功能: 下拉菜单 输入过滤框 以CSS样式为主,也会涉及到Vue组件和element组件的使用. 对于没有层级的数据,我们可以使用表格或卡片来展示.要展示或建立层级 ...
- 【前端】Vue+Element UI案例:通用后台管理系统-代码总结(已开源)
文章目录 前言 项目文件目录 api mockServe home.js permission.js index.js mock.js user.js assert components Common ...
- element ui设置表格表头高度和每一行的高度
填坑记录:今天用element ui的表格组件做用户信息展示,直接拉取的官网的代码过来,发现表头和每一行都太高了,如下: 因为第一次使用element ui的表格组件,不太清楚会遇到这样的坑,以为能轻 ...
- vue + elment ui打印表格数据
vue + elment ui打印表格数据 主要的原理就是 在vue项目中 通过调用浏览器自带的打印功能,完成对table数据的打印 解决表格错位 以及elment ui 双重表头的问题 封装一下打印 ...
最新文章
- L1-056 猜数字 (结构体解决)
- python字符串按长度分割_python 按照固定长度分割字符串的方法小结
- 第八届全国功能基因组学高峰论坛-微生物分会场 完美落幕!
- WINDOWSPHONE STUDY1:创建一个 Windows Phone 7 下的简单 RSS 阅读器
- abap 给用户分配事物代码权限_【第五篇】SAP ABAP7.50 之用户接口
- react 拖拽连接插件_一款精美的 react 后台管理系统
- zabbix mysql密码_重置Zabbix数据库Admin的密码
- 自动化测试——unittest编写接口测试用例
- 27. Element nodeType 属性
- ucGUI3.9版本快速移植构建
- 中国地区城市php,中国城市列表
- 自适应机器人:定义工业机械臂的未来
- 13异步多线程(三)Parallel,线程安全
- 找工作需要有工作经验,而没工作就没工作经验。如何理解这种死循环?
- [转载]丢掉鼠标-Mac神软Alfred使用手册1_我是亲民_新浪博客
- 项目经理如何面对困境
- 无线路由器接入局域网的三种方式
- 罗素:如何避免愚蠢的见识
- %load_ext autoreload是什么意思
- YOJ3509-小豪搬宝藏