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读取cookies)
Jan 11 Javascript
Javascript代码在页面加载时的执行顺序介绍
May 03 Javascript
jQuery中操控hidden、disable等无值属性的方法
Jan 06 Javascript
JavaScript设计模式之单件模式介绍
Dec 28 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
Apr 27 Javascript
HTML5使用DeviceOrientation实现摇一摇功能
Jun 05 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
Oct 31 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
Apr 03 Javascript
Node 代理访问的实现
Sep 19 Javascript
JavaScript中的相等操作符使用详解
Dec 21 Javascript
微信小程序停止其他视频播放当前视频的实例代码
Dec 25 Javascript
JS数组Reduce方法功能与用法实例详解
Apr 29 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
smarty 原来也不过如此~~呵呵
2006/11/25 PHP
PHP 程序员应该使用的10个组件
2009/10/31 PHP
PHP+javascript制作带提示的验证码源码分享
2014/05/28 PHP
PHP 反射(Reflection)使用实例
2015/05/12 PHP
javascript 新浪背投广告实现代码
2009/07/07 Javascript
javascript cookies 设置、读取、删除实例代码
2010/04/12 Javascript
一个js过滤空格的小函数
2014/10/10 Javascript
基于JavaScript实现熔岩灯效果导航菜单
2017/01/04 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
2017/03/31 Javascript
使用jQuery卸载全部事件的思路详解
2017/04/03 jQuery
利用JQUERY实现多个AJAX请求等待的实例
2017/12/14 jQuery
vue组件的写法汇总
2018/04/12 Javascript
angularjs通过过滤器返回超链接的方法
2018/10/26 Javascript
AJAX在JQuery中的应用详解
2019/01/30 jQuery
vue项目添加多页面配置的步骤详解
2019/05/22 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
2019/06/11 Javascript
js实现轮播图效果 纯js实现图片自动切换
2020/08/09 Javascript
讲解Python中的递归函数
2015/04/27 Python
Python求导数的方法
2015/05/09 Python
Linux下将Python的Django项目部署到Apache服务器
2015/12/24 Python
python通过getopt模块如何获取执行的命令参数详解
2017/12/29 Python
python+matplotlib实现动态绘制图片实例代码(交互式绘图)
2018/01/20 Python
使用Python向C语言的链接库传递数组、结构体、指针类型的数据
2019/01/29 Python
python文件选择对话框的操作方法
2019/06/27 Python
PyPDF2读取PDF文件内容保存到本地TXT实例
2020/05/12 Python
Spark处理数据排序问题如何避免OOM
2020/05/21 Python
Django如何批量创建Model
2020/09/01 Python
HTML5 Canvas draw方法制作动画效果示例
2013/07/11 HTML / CSS
澳大利亚头发和美容产品购物网站:OZ Hair & Beauty
2020/03/27 全球购物
函授本科自我鉴定
2014/02/04 职场文书
2014学雷锋活动总结
2014/03/09 职场文书
精神文明单位申报材料
2014/05/02 职场文书
2014法院干警廉洁警示教育思想汇报
2014/09/13 职场文书
2014年协会工作总结
2014/11/22 职场文书
食品安全主题班会
2015/08/13 职场文书
2015年国庆放假通知范文
2015/08/18 职场文书