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实现的鼠标经过时播放声音
May 18 Javascript
Jquery 复选框取值兼容FF和IE8(测试有效)
Oct 29 Javascript
javascript实现base64 md5 sha1 密码加密
Sep 09 Javascript
JavaScript实现的select点菜功能示例
Jan 16 Javascript
详解node HTTP请求客户端 - Request
May 05 Javascript
vue中如何创建多个ueditor实例教程
Nov 14 Javascript
在Vue组件上动态添加和删除属性方法
Feb 23 Javascript
Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解
Mar 13 Javascript
vue页面切换到滚动页面显示顶部的实例
Mar 13 Javascript
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
JavaScript Window浏览器对象模型原理解析
May 30 Javascript
微信小程序实现左滑删除效果
Nov 18 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
是否存在第一台收音机的说法
2021/03/01 无线电
用php来检测proxy
2006/10/09 PHP
将CMYK颜色值和RGB颜色相互转换的PHP代码
2014/07/28 PHP
PHP统计当前在线用户数实例讲解
2015/10/21 PHP
详解PHP处理密码的几种方式
2016/11/30 PHP
php中final关键字用法分析
2016/12/07 PHP
php str_getcsv把字符串解析为数组的实现方法
2017/04/05 PHP
javascript基础的动画教程,直观易懂
2007/01/10 Javascript
JS 实现完美include载入实现代码
2010/08/05 Javascript
用jquery的方法制作一个简单的导航栏
2014/06/23 Javascript
点击标签切换和自动切换DIV选项卡
2014/08/10 Javascript
javascript使用avalon绑定实现checkbox全选
2015/05/06 Javascript
jQuery实现调整表格单列顺序完整实例
2016/06/20 Javascript
自动适应iframe右边的高度
2016/12/22 Javascript
Node.js 实现远程桌面监控的方法步骤
2019/07/02 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
2020/05/29 Javascript
微信小程序tab左右滑动切换功能的实现代码
2021/02/08 Javascript
python读取浮点数和读取文本文件示例
2014/05/06 Python
Python3基础之函数用法
2014/08/13 Python
Python Tkinter简单布局实例教程
2014/09/03 Python
Python的字典和列表的使用中一些需要注意的地方
2015/04/24 Python
python如何使用正则表达式的前向、后向搜索及前向搜索否定模式详解
2017/11/08 Python
使用pandas模块读取csv文件和excel表格,并用matplotlib画图的方法
2018/06/22 Python
Python异常处理操作实例详解
2018/08/28 Python
python并发爬虫实用工具tomorrow实用解析
2019/09/25 Python
Python文件路径名的操作方法
2019/10/30 Python
wxpython自定义下拉列表框过程图解
2020/02/14 Python
公司出纳岗位职责
2013/12/07 职场文书
运动会通讯稿200字
2014/02/16 职场文书
语文高效课堂实施方案
2014/05/03 职场文书
学习三严三实对照检查材料思想汇报
2014/09/22 职场文书
优秀护士事迹材料
2014/12/25 职场文书
遗失说明具结保证书
2015/02/26 职场文书
2016银行招聘自荐信
2016/01/28 职场文书
上个世纪50年代的可穿戴技术:无线电帽子
2022/02/18 无线电
Python自动化工具之实现Excel转Markdown表格
2022/04/08 Python