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 相关文章推荐
jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
Feb 04 Javascript
JQuery判断HTML元素是否存在的两种解决方法
Dec 26 Javascript
js使用循环清空某个div中的input标签值
Sep 29 Javascript
JS自定义对象实现Java中Map对象功能的方法
Jan 20 Javascript
JavaScript的内存释放问题详解
Jan 21 Javascript
举例讲解jQuery中可见性过滤选择器的使用
Apr 18 Javascript
20分钟轻松创建自己的Bootstrap站点
May 12 Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
May 28 Javascript
Angular.Js之Scope作用域的学习教程
Apr 27 Javascript
JavaScript中Object基础内部方法图
Feb 05 Javascript
vue $set 给数据赋值的实例
Nov 09 Javascript
vue 需求 data中的数据之间的调用操作
Aug 05 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中的日期处理方法集锦
2007/01/02 PHP
php set_magic_quotes_runtime() 函数过时解决方法
2010/07/08 PHP
测试php函数的方法
2013/11/13 PHP
PHP图像裁剪缩略裁切类源码及使用方法
2016/01/07 PHP
csdn 博客的css样式 v3
2009/02/24 Javascript
Mootools 1.2教程 滚动条(Slider)
2009/09/15 Javascript
利用js实现遮罩以及弹出可移动登录窗口
2013/07/08 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
2014/03/25 Javascript
深入分析js的冒泡事件
2014/12/05 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
2015/06/01 Javascript
又一枚精彩的弹幕效果jQuery实现
2016/07/25 Javascript
JS之相等操作符详解
2016/09/13 Javascript
微信小程序 网络API 上传、下载详解
2016/11/09 Javascript
JSONP跨域请求
2017/03/02 Javascript
async/await与promise(nodejs中的异步操作问题)
2017/03/03 NodeJs
从零开始学习Node.js系列教程二:文本提交与显示方法
2017/04/13 Javascript
angularjs中使用ng-bind-html和ng-include的实例
2017/04/28 Javascript
Node.js中的http请求客户端示例(request client)
2017/05/04 Javascript
Vue-router 类似Vuex实现组件化开发的示例
2017/09/15 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
2018/11/13 Javascript
微信小程序实现展示评分结果功能
2019/02/15 Javascript
用Python实现通过哈希算法检测图片重复的教程
2015/04/02 Python
Python 正则表达式的高级用法
2016/12/04 Python
详解Django模版中加载静态文件配置方法
2019/07/21 Python
Flask框架模板继承实现方法分析
2019/07/31 Python
Python 、Pycharm、Anaconda三者的区别与联系、安装过程及注意事项
2019/10/11 Python
爱尔兰灯和灯具网上商店:Lights.ie
2018/03/26 全球购物
Rossignol金鸡美国官网:始于1907年法国百年雪具品牌
2019/03/06 全球购物
英国奢侈品牌时尚购物平台:Farfetch(支持中文)
2020/02/18 全球购物
Made in Design意大利:现代家具、名家灯具和装饰
2020/10/27 全球购物
化工工艺专业求职信
2013/09/22 职场文书
新学期班主任寄语
2014/01/18 职场文书
教师师德师风自我剖析材料
2014/09/29 职场文书
小学五年级语文上册教学计划
2015/01/22 职场文书
宣传委员竞选稿
2015/11/19 职场文书
Python+Appium实现自动抢微信红包
2021/05/21 Python