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 相关文章推荐
javascript数组的扩展实现代码集合
Jun 01 Javascript
jquery获取iframe中的dom对象(两种方法)
Jul 02 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
Nov 26 Javascript
使用window.prompt()实现弹出用户输入的对话框
Apr 13 Javascript
JavaScript中join()方法的使用简介
Jun 09 Javascript
浅谈jquery的html方法里包含特殊字符的处理
Nov 30 Javascript
在vue里面设置全局变量或数据的方法
Mar 09 Javascript
Koa项目搭建过程详细记录
Apr 12 Javascript
vue脚手架搭建过程图解
Jun 06 Javascript
JavaScript如何获取一个元素的样式信息
Jul 29 Javascript
JavaScript中this的学习笔记及用法整理
Feb 17 Javascript
用JS创建一个录屏功能
Nov 11 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利用cookie实现访问次数统计代码
2011/05/19 PHP
php学习笔记 [预定义数组(超全局数组)]
2011/06/09 PHP
php DOS攻击实现代码(附如何防范)
2012/05/29 PHP
php采用ajax数据提交post与post常见方法总结
2014/11/10 PHP
PHP学习记录之常用的魔术常量详解
2019/12/12 PHP
JavaScript创建命名空间(namespace)的最简实现
2007/12/11 Javascript
Div自动滚动到末尾的代码
2008/10/26 Javascript
javascript判断用户浏览器插件安装情况的代码
2011/01/01 Javascript
Extjs4 Treegrid 使用心得分享(经验篇)
2013/07/01 Javascript
JScript分割字符串示例代码
2013/09/04 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
2014/04/04 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
2014/06/15 Javascript
浅谈Sizzle的“编译原理”
2015/04/14 Javascript
javascript获取文档坐标和视口坐标
2015/05/26 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
2016/04/07 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
2016/09/01 Javascript
JavaScript实现的可变动态数字键盘控件方式实例代码
2017/07/15 Javascript
javascript变量提升和闭包理解
2018/03/12 Javascript
JS实现字符串中去除指定子字符串方法分析
2018/05/17 Javascript
解决vue 项目引入字体图标报错、不显示等问题
2018/09/01 Javascript
vue自定义底部导航栏Tabbar的实现代码
2018/09/03 Javascript
详解vue 命名视图
2019/08/14 Javascript
Python3实现并发检验代理池地址的方法
2016/09/18 Python
Python利用sqlacodegen自动生成ORM实体类示例
2019/06/04 Python
基于Python的接口自动化unittest测试框架和ddt数据驱动详解
2021/01/27 Python
雅诗兰黛加拿大官网:Estee Lauder加拿大
2019/07/31 全球购物
牧马人澳大利亚官网:Wrangler澳大利亚
2019/10/08 全球购物
Linux的主要特性
2014/10/06 面试题
工作过失检讨书
2014/02/23 职场文书
2014党员学习习主席讲话思想汇报
2014/09/15 职场文书
大明湖导游词
2015/02/03 职场文书
酒店前台岗位职责
2015/04/16 职场文书
计划生育目标责任书
2015/05/09 职场文书
2015年销售助理工作总结
2015/05/11 职场文书
Java 数组内置函数toArray详解
2021/06/28 Java/Android
Nginx使用ngx_http_upstream_module实现负载均衡功能示例
2022/08/05 Servers