您现在的位置是:网站首页> 编程资料编程资料

vue+elementui实现动态添加行/可编辑的table_vue.js_

2023-05-24 314人已围观

简介 vue+elementui实现动态添加行/可编辑的table_vue.js_

本文实例为大家分享了vue+elementui实现动态添加行、可编辑的table的具体代码,供大家参考,具体内容如下

HTMl代码块:

                                                                                                                                                                                                                                                                                                                                                

js代码块:

1.添加操作

addmembers() {    console.log('与承租户同户籍成员');    var member = this.zichandetail.members;    console.log(member);    var length = member.length;    this.zichandetail.members.push(    {       id: parseInt(length),       name: '',       relationship: '',       mobile: '',       birthday: '',       gongzuodanwei: '',    })  },

2.删除操作

delmembers(index, row) {    var that = this;    this.$confirm('确认删除吗?', '提示', {    confirmButtonText: '确定',    cancelButtonText: '取消',    type: 'warning'    }).then(() => {       //点击确定的操作(调用接口)       var hasmembers = that.zichandetail.members;       for (var i = 0; i < hasmembers.length; i++) {           if (row.id == hasmembers[i].id) {               that.zichandetail.members.splice(i, 1);               // this.$message({ message: '删除成功', duration: 2000, type: 'success' });            }        }      }).catch(() => {      //点取消的提示          return;      }); },

实现效果:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

-六神源码网