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 delete 使用示例代码
Mar 29 Javascript
js实现拖拽 闭包函数详细介绍
Nov 25 Javascript
ExtJS4 Grid改变单元格背景颜色及Column render学习
Feb 06 Javascript
js 文本滚动效果的实例代码
Aug 17 Javascript
js判断文本框剩余可输入字数的方法
Feb 04 Javascript
AngularJS入门教程之Cookies读写操作示例
Nov 02 Javascript
js闭包用法实例详解
Dec 13 Javascript
详解node HTTP请求客户端 - Request
May 05 Javascript
详解angularjs中如何实现控制器和指令之间交互
May 31 Javascript
深入理解angular2启动项目步骤
Jul 15 Javascript
Angular PWA使用的Demo示例
Jan 31 Javascript
js实现登录时记住密码的方法分析
Apr 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极大的增强功能和性能
2006/10/09 PHP
PHP使用GETDATE获取当前日期时间作为一个关联数组的方法
2015/03/19 PHP
1亿条数据如何分表100张到Mysql数据库中(PHP)
2015/07/29 PHP
精解window.setTimeout()&amp;window.setInterval()使用方式与参数传递问题!
2007/11/23 Javascript
读jQuery之八 包装事件对象
2011/06/21 Javascript
VBS通过WMI监视注册表变动的代码
2011/10/27 Javascript
js弹出确认是否删除对话框
2014/03/27 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
2014/04/10 Javascript
jQuery监控文本框事件并作相应处理的方法
2015/04/16 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
2015/07/05 Javascript
封装属于自己的JS组件
2016/01/27 Javascript
jQuery多文件异步上传带进度条实例代码
2016/08/16 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
2017/03/28 Javascript
前端构建工具之gulp的语法教程
2017/06/12 Javascript
vue+mockjs模拟数据实现前后端分离开发的实例代码
2017/08/08 Javascript
Vue2.0子同级组件之间数据交互方法
2018/02/28 Javascript
Vue核心概念Getter的使用方法
2019/01/18 Javascript
node.js中express模块创建服务器和http模块客户端发请求
2019/03/06 Javascript
基于vue、react实现倒计时效果
2019/08/26 Javascript
vue中的.$mount('#app')手动挂载操作
2020/09/02 Javascript
jQuery实现推拉门效果
2020/10/19 jQuery
Python文件操作,open读写文件,追加文本内容实例
2016/12/14 Python
解决Python2.7读写文件中的中文乱码问题
2018/04/12 Python
对python使用http、https代理的实例讲解
2018/05/07 Python
python 匹配url中是否存在IP地址的方法
2018/06/04 Python
python设置环境变量的作用整理
2020/02/17 Python
Python多线程通信queue队列用法实例分析
2020/03/24 Python
Python Socket TCP双端聊天功能实现过程详解
2020/06/15 Python
python两个list[]相加的实现方法
2020/09/23 Python
硅酸盐工业控制专业应届生求职信
2013/11/02 职场文书
信用社员工先进事迹材料
2014/02/04 职场文书
班级寄语大全
2014/04/10 职场文书
幼儿园开学通知
2015/04/24 职场文书
Python中递归以及递归遍历目录详解
2021/10/24 Python
JAVA SpringMVC实现自定义拦截器
2022/03/16 Python
Python中requests库的用法详解
2022/06/05 Python