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实现tab标签浏览效果
Feb 20 Javascript
javascript第一课
Feb 27 Javascript
javascript Xml增删改查(IE下)操作实现代码
Jan 30 Javascript
javascript函数以及基础写法100多条实用整理
Jan 13 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
Jan 22 Javascript
BootStrap与Select2使用小结
Feb 17 Javascript
javascript 面向对象function详解及实例代码
Feb 28 Javascript
微信小程序之选项卡的实现方法
Sep 29 Javascript
深入理解Vue Computed计算属性原理
May 29 Javascript
vue父组件触发事件改变子组件的值的方法实例详解
May 07 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
May 10 Javascript
原理深度解析Vue的响应式更新比React快
Apr 04 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
模拟SQLSERVER的两个函数:dateadd(),datediff()
2006/10/09 PHP
PHP 远程文件管理,可以给表格排序,遍历目录,时间排序
2009/08/07 PHP
php 使用file_get_contents读取大文件的方法
2014/11/13 PHP
PHP实现简易用户登录系统
2020/07/10 PHP
让你的博文自动带上缩址的实现代码,方便发到微博客上
2010/12/28 Javascript
js showModalDialog 弹出对话框的简单实例(子窗体)
2014/01/07 Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
js下将金额数字每三位一逗号分隔
2016/02/19 Javascript
JQuery插件Marquee.js实现无缝滚动效果
2016/04/26 Javascript
Angularjs 自定义服务的三种方式(推荐)
2016/08/02 Javascript
Bootstrap导航简单实现代码
2017/03/06 Javascript
慕课网题目之js实现抽奖系统功能
2017/09/19 Javascript
微信开发之微信jssdk录音功能开发示例
2018/10/22 Javascript
原生javascript单例模式的应用实例分析
2020/02/23 Javascript
javascript实现支付宝滑块验证码效果
2020/07/24 Javascript
[01:09:24]Ti4开幕式
2014/07/19 DOTA
用Python和MD5实现网站挂马检测程序
2014/03/13 Python
Python中Django 后台自定义表单控件
2017/03/28 Python
解决nohup执行python程序log文件写入不及时的问题
2019/01/14 Python
Python流行ORM框架sqlalchemy安装与使用教程
2019/06/04 Python
python Tcp协议发送和接收信息的例子
2019/07/22 Python
浅析python 通⽤爬⾍和聚焦爬⾍
2020/09/28 Python
简述python&amp;pytorch 随机种子的实现
2020/10/07 Python
python中entry用法讲解
2020/12/04 Python
让IE9以下版本的浏览器兼容HTML5的方法
2014/03/12 HTML / CSS
移动HTML5前端框架—MUI的使用
2017/12/18 HTML / CSS
Russell Stover巧克力官方网站:美国领先的精美巧克力制造商
2016/11/27 全球购物
NIHAOMARKET官方海外旗舰店:意大利你好华人超市
2018/01/27 全球购物
美国婴童服装市场上的领先品牌:Carter’s
2018/02/08 全球购物
资产经营总监岗位职责
2013/12/04 职场文书
高中生期末评语
2014/01/28 职场文书
法制宣传日活动总结
2014/04/29 职场文书
教师群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
学前教育见习总结
2015/06/23 职场文书
2015年暑期社会实践报告
2015/07/13 职场文书
SQL SERVER触发器详解
2022/02/24 SQL Server