vue+element-ui实现表格编辑的三种实现方式


Posted in Javascript onOctober 31, 2018

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-column
  fixed="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://3water.com/article/149870.htm

另外,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://3water.com/article/149877.htm

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 浮动层菜单收藏
Jan 16 Javascript
利用了jquery的ajax实现二级联互动菜单
Dec 02 Javascript
Node.js模拟浏览器文件上传示例
Mar 26 Javascript
深入分析Cookie的安全性问题
Mar 01 Javascript
jQuery实现邮箱下拉列表自动补全功能
Sep 08 Javascript
AngularJS入门教程之数据绑定用法示例
Nov 01 Javascript
JS正则表达式之非捕获分组用法实例分析
Dec 28 Javascript
JS鼠标3次点击事件实现代码及扩展思路
Sep 12 Javascript
微信小程序与后台PHP交互的方法实例分析
Dec 10 Javascript
vue项目中实现缓存的最佳方案详解
Jul 11 Javascript
JS删除数组指定值常用方法详解
Jun 04 Javascript
Nuxt的动态路由和参数校验操作
Nov 09 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
Oct 31 #Javascript
微信小程序实现签到功能
Oct 31 #Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
Oct 31 #Javascript
微信小程序实现自动定位功能
Oct 31 #Javascript
iview在vue-cli3如何按需加载的方法
Oct 31 #Javascript
jQuery+PHP实现上传裁剪图片
Jun 29 #jQuery
vue+iview 实现可编辑表格的示例代码
Oct 31 #Javascript
You might like
php ImageMagick windows下安装教程
2015/01/26 PHP
Zend Framework数据库操作方法实例总结
2016/12/11 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
在laravel中实现ORM模型使用第二个数据库设置
2019/10/24 PHP
JavaScript写的一个DIV 弹出网页对话框
2009/08/14 Javascript
JQuery上传插件Uploadify使用详解及错误处理
2010/04/27 Javascript
用JS提交参数创建form表单在FireFox中遇到的问题
2013/01/16 Javascript
什么是cookie?js手动创建和存储cookie
2014/05/27 Javascript
使用AngularJS实现表单向导的方法
2015/06/19 Javascript
jQuery时间轴插件使用详解
2015/07/16 Javascript
javascript实现uploadify上传格式以及个数限制
2015/11/23 Javascript
针对BootStrap中tabs控件的美化和完善(推荐)
2016/07/06 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
2016/07/15 Javascript
AngularJS入门教程之多视图切换用法示例
2016/11/02 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
2017/07/19 Javascript
完美实现js拖拽效果 return false用法详解
2017/07/28 Javascript
JavaScript创建对象的四种常用模式实例分析
2019/01/11 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
2019/02/13 Javascript
vue与django集成打包的实现方法
2019/11/11 Javascript
微信小程序图片自适应实现解析
2020/01/21 Javascript
vue-router之解决addRoutes使用遇到的坑
2020/07/19 Javascript
python获取beautifulphoto随机某图片代码实例
2013/12/18 Python
linux系统使用python监控apache服务器进程脚本分享
2014/01/15 Python
对python中的高效迭代器函数详解
2018/10/18 Python
Python OpenCV利用笔记本摄像头实现人脸检测
2020/08/20 Python
Python 多线程其他属性以及继承Thread类详解
2019/08/28 Python
美国男士西装打折店:Jos. A. Bank
2017/11/13 全球购物
描述Cookie和Session的作用,区别和各自的应用范围,Session工作原理
2015/03/25 面试题
外贸业务员岗位职责
2013/11/24 职场文书
应届行政管理专业个人自我评价
2013/12/28 职场文书
省级优秀班集体申报材料
2014/05/25 职场文书
治安消防安全责任书
2014/07/23 职场文书
关于旅游的活动方案
2014/08/15 职场文书
银行柜员与客户起冲突检讨书
2014/09/27 职场文书
篮球赛新闻稿
2015/07/17 职场文书
2015年依法治校工作总结
2015/07/27 职场文书