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 相关文章推荐
FormValidate 表单验证功能代码更新并提供下载
Aug 23 Javascript
jQuery第三课 修改元素属性及内容的代码
Mar 14 Javascript
JS刷新当前页面的几种方法总结
Dec 24 Javascript
JS常用加密编码与算法实例总结
Dec 22 Javascript
原生js实现焦点轮播图效果
Jan 12 Javascript
20行JS代码实现粘贴板复制功能
Feb 06 Javascript
详解Angular-ui-BootStrap组件的解释以及使用
Jul 13 Javascript
js数据类型检测总结
Aug 05 Javascript
Vue表单绑定的实例代码(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)
May 13 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
Nov 13 Javascript
如何使用webpack打包一个库library的方法步骤
Dec 18 Javascript
React自定义hook的方法
Jun 25 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
php4的session功能评述(二)
2006/10/09 PHP
php 变量定义方法
2009/06/14 PHP
PHP+MySQL 手工注入语句大全 推荐
2009/10/30 PHP
深入讲解PHP Session及如何保持其不过期的方法
2015/08/18 PHP
php使用PDO事务配合表格读取大量数据插入操作实现方法
2017/02/16 PHP
centos下file_put_contents()无法写入文件的原因及解决方法
2017/04/01 PHP
PHP中Cookie的使用详解(简单易懂)
2017/04/28 PHP
[原创]提供复制本站内容时出现,该文章转自脚本之家等字样的js代码
2007/03/27 Javascript
网页图片延时加载的js代码
2010/04/22 Javascript
用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)
2012/06/22 Javascript
将两个div左右并列显示并实现点击标题切换内容
2013/10/22 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
2014/01/02 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
2020/09/12 Javascript
JavaScript基础语法、dom操作树及document对象
2014/12/02 Javascript
NodeJS学习笔记之Connect中间件模块(二)
2015/01/27 NodeJs
javascript计时器详解
2015/02/28 Javascript
jQuery实现平滑滚动到指定锚点的方法
2015/03/20 Javascript
JavaScript中的事件委托及好处
2016/07/12 Javascript
基于百度地图实现产品销售的单位位置查看功能设计与实现
2016/10/21 Javascript
9个让JavaScript调试更简单的Console命令
2016/11/14 Javascript
node.js入门学习之url模块
2017/02/25 Javascript
基于JavaScript实现瀑布流效果
2017/03/29 Javascript
React Native验证码倒计时工具类分享
2017/10/24 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
2018/03/13 Javascript
vue.js父子组件通信动态绑定的实例
2018/09/28 Javascript
Vue请求JSON Server服务器数据的实现方法
2018/11/02 Javascript
vue递归获取父元素的元素实例
2020/08/07 Javascript
Python读写操作csv和excle文件代码实例
2020/03/16 Python
python 负数取模运算实例
2020/06/03 Python
阿拉伯世界最大的电子商务网站:Souq沙特阿拉伯
2016/10/28 全球购物
美国在线医疗分销商:MedEx Supply
2020/02/04 全球购物
课前三分钟演讲稿
2014/04/24 职场文书
领导班子个人对照检查材料(群众路线)
2014/09/26 职场文书
2019脱贫攻坚工作总结报告范本!
2019/08/06 职场文书
为Java项目添加Redis缓存的方法
2021/05/18 Redis
Java异常处理try catch的基本用法
2021/12/06 Java/Android