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解析XML的实现代码
Nov 12 Javascript
js创建对象的几种常用方式小结(推荐)
Oct 24 Javascript
javascript处理表单示例(javascript提交表单)
Apr 28 Javascript
JS控制输入框内字符串长度
May 21 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
Oct 17 Javascript
2则自己编写的jQuery特效分享
Feb 26 Javascript
简单谈谈javascript中this的隐式绑定
Feb 22 Javascript
ionic组件ion-tabs选项卡切换效果实例
Aug 27 Javascript
详解Bootstrap各式各样的按钮(推荐)
Dec 13 Javascript
Vue入门之数量加减运算操作示例
Dec 11 Javascript
vue-cli3 配置开发与测试环境详解
May 17 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
Feb 23 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+XML 制作简单的留言本 图文教程
2009/11/02 PHP
微信自定义菜单的处理开发示例
2015/04/16 PHP
php猜单词游戏
2015/09/29 PHP
php metaphone()函数的定义和用法
2016/05/15 PHP
Laravel使用消息队列需要注意的一些问题
2017/12/13 PHP
PHP从零开始打造自己的MVC框架之路由类实现方法分析
2019/06/03 PHP
jquery 插件学习(二)
2012/08/06 Javascript
推荐40款强大的 jQuery 导航插件和教程(上篇)
2012/09/14 Javascript
javascript与有限状态机详解
2014/05/08 Javascript
js实现具有高亮显示效果的多级菜单代码
2015/09/01 Javascript
javascript如何定义对象数组
2016/06/07 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
2017/03/13 Javascript
Express之托管静态文件的方法
2018/06/01 Javascript
Vue.js 时间转换代码及时间戳转时间字符串
2018/10/16 Javascript
Node.js API详解之 assert模块用法实例分析
2020/05/26 Javascript
[03:16]DOTA2完美大师赛主赛事首日集锦
2017/11/23 DOTA
Python原始字符串(raw strings)用法实例
2014/10/13 Python
跟老齐学Python之通过Python连接数据库
2014/10/28 Python
在Python中操作字符串之startswith()方法的使用
2015/05/20 Python
python微信跳一跳系列之自动计算跳一跳距离
2018/02/26 Python
python Celery定时任务的示例
2018/03/13 Python
pandas or sql计算前后两行数据间的增值方法
2018/04/20 Python
Django项目实战之用户头像上传与访问的示例
2018/04/21 Python
Django多数据库联用实现方法解析
2020/11/12 Python
python跨文件使用全局变量的实现
2020/11/17 Python
LN-CC美国:伦敦时尚生活的缩影
2019/02/19 全球购物
英国领先的电动可调床制造商:Laybrook
2019/12/26 全球购物
你在项目中用到了xml技术的哪些方面?如何实现的?
2014/01/26 面试题
劳资专员岗位职责
2013/12/27 职场文书
教师师德演讲稿
2014/05/06 职场文书
股东合作协议书
2014/09/12 职场文书
运动会广播稿150字(9篇)
2014/09/20 职场文书
检察院对照“四风”认真查找问题落实整改措施
2014/09/26 职场文书
结婚喜宴迎宾词
2015/08/10 职场文书
Spring Boot两种全局配置和两种注解的操作方法
2021/06/29 Java/Android
利用正则表达式匹配浮点型数据
2022/05/30 Java/Android