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 实现的自定义对话框
Mar 24 Javascript
JQuery的ajax基础上的超强GridView展示
Sep 18 Javascript
Eval and new funciton not the same thing
Dec 27 Javascript
jquery单行文字向上滚动效果示例
Mar 06 Javascript
javascript先序遍历DOM树的方法
Feb 27 Javascript
微信公众平台开发教程(六)获取个性二维码的实例
Dec 02 Javascript
JavaScript循环_动力节点Java学院整理
Jun 28 Javascript
微信小程序之前台循环数据绑定
Aug 18 Javascript
Vuex实现计数器以及列表展示效果
Mar 10 Javascript
Chart.js 轻量级HTML5图表绘制工具库(知识整理)
May 22 Javascript
LayUI数据接口返回实体封装的例子
Sep 12 Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
Sep 13 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中常见的mongodb查询操作
2013/06/20 PHP
深入理解PHP中的global
2014/08/19 PHP
php面向对象中static静态属性与方法的内存位置分析
2015/02/08 PHP
Yii实现复选框批量操作实例代码
2017/03/15 PHP
php动态读取数据清除最右边距的方法
2017/04/12 PHP
js之WEB开发调试利器:Firebug 下载
2007/01/13 Javascript
gridpanel动态加载数据的实例代码
2013/07/18 Javascript
改变状态栏文字的js代码
2014/06/13 Javascript
无限树Jquery插件zTree的常用功能特性总结
2014/09/11 Javascript
原生js和jQuery随意改变div属性style的名称和值
2014/10/22 Javascript
javascript获取四位数字或者字母的随机数
2015/01/09 Javascript
js实现密码强度检测【附示例】
2016/03/30 Javascript
jQuery实现遮罩层登录对话框
2016/12/29 Javascript
使用JSON格式提交数据到服务端的实例代码
2018/04/01 Javascript
Javascript Promise用法详解
2018/05/10 Javascript
vue-router源码之history类的浅析
2019/05/21 Javascript
localstorage实现带过期时间的缓存功能
2019/06/28 Javascript
vue路由 遍历生成复数router-link的例子
2019/10/30 Javascript
JS实现简易计算器
2020/02/14 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
2020/10/29 Javascript
Python中selenium实现文件上传所有方法整理总结
2017/04/01 Python
Python实现读取SQLServer数据并插入到MongoDB数据库的方法示例
2018/06/09 Python
线程安全及Python中的GIL原理分析
2019/10/29 Python
Pandas数据离散化原理及实例解析
2019/11/16 Python
详解用Python调用百度地图正/逆地理编码API
2020/07/02 Python
Python常用数据分析模块原理解析
2020/07/20 Python
Python爬取豆瓣数据实现过程解析
2020/10/27 Python
伦敦最有品味的百货:Liberty London
2016/11/12 全球购物
德国消费电子产品购物网站:Guter Kauf
2020/09/15 全球购物
南京软件公司的.net程序员笔试题
2014/08/31 面试题
三年级科学教学反思
2014/01/29 职场文书
财务人员的自我评价范文
2014/03/03 职场文书
博士生求职信
2014/07/06 职场文书
2014年售票员工作总结
2014/11/19 职场文书
婚礼父母致辞
2015/07/28 职场文书
Flink 侧流输出源码示例解析
2022/09/23 Servers