vue+elementui实现动态添加行/可编辑的table

本文实例为大家分享了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;
     });
},

实现效果：

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