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 相关文章推荐
对xmlHttp对象方法和属性的理解
Jan 17 Javascript
javascript 随机展示头像实现代码
Dec 06 Javascript
详解JS函数重载
Dec 04 Javascript
JavaScript中字符串(string)转json的2种方法
Jun 25 Javascript
基于jQuery实现仿百度首页选项卡切换效果
May 29 Javascript
JS中常用的输出方式(五种)
Jun 12 Javascript
js实现3D图片展示效果
Mar 09 Javascript
详解node.js平台下Express的session与cookie模块包的配置
Apr 26 Javascript
js正则表达式校验指定字符串的方法
Jul 23 Javascript
node.js 基于cheerio的爬虫工具的实现(需要登录权限的爬虫工具)
Apr 10 Javascript
Javascript数组方法reduce的妙用之处分享
Jun 10 Javascript
vue 扩展现有组件的操作
Aug 14 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引用
2015/02/22 PHP
详解PHP的Yii框架中的Controller控制器
2016/03/29 PHP
一次因composer错误使用引发的问题与解决
2019/03/06 PHP
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
2013/04/26 Javascript
更快的异步执行(setTimeout多浏览器)
2014/08/12 Javascript
Backbone.js中的集合详解
2015/01/14 Javascript
javascript实现禁止鼠标滚轮事件
2015/07/24 Javascript
JavaScript学习小结(一)——JavaScript入门基础
2015/09/02 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
2016/06/16 Javascript
Bootstrap免费字体和图标网站(值得收藏)
2017/03/16 Javascript
vue 自定义全局方法,在组件里面的使用介绍
2018/02/28 Javascript
vue组件实现可搜索下拉框扩展
2020/10/23 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
2018/06/19 Javascript
基于vue2的canvas时钟倒计时组件步骤解析
2018/11/05 Javascript
如何根据业务封装自己的功能组件
2019/04/19 Javascript
vue-week-picker实现支持按周切换的日历
2019/06/26 Javascript
通过js实现压缩图片上传功能
2020/02/25 Javascript
Openlayers显示瓦片网格信息的方法
2020/09/28 Javascript
[53:21]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS LGD-CDEC
2014/05/22 DOTA
[08:56]DOTA2-DPC中国联赛2月23日Recap集锦
2021/03/11 DOTA
python列表list保留顺序去重的实例
2018/12/14 Python
在python中使用with打开多个文件的方法
2019/01/07 Python
Python3 max()函数基础用法
2019/02/19 Python
python爬虫简单的添加代理进行访问的实现代码
2019/04/04 Python
django中使用Celery 布式任务队列过程详解
2019/07/29 Python
python 爬取疫情数据的源码
2020/02/09 Python
Jupyter安装链接aconda实现过程图解
2020/11/02 Python
某公司面试题
2012/03/05 面试题
文员自我评价怎么写
2013/09/19 职场文书
毕业生自荐信
2013/12/14 职场文书
优秀校长事迹材料
2014/12/24 职场文书
2015秋季新学期开学寄语
2015/05/28 职场文书
雷锋的观后感
2015/06/10 职场文书
退休劳动合同怎么写?
2019/10/25 职场文书
导游词之沈阳清昭陵
2019/12/28 职场文书
彻底理解golang中什么是nil
2021/04/29 Golang