elementUI表格实现可编辑和增加行功能--直接复制即可

结构：

 

        

          新建任务
          
        
 
        

            

                

                    
                    
                
            

            

              
                
                
                
                
                
                
                  
                
              
            
            
        
 
        

          新增
          暂存
        
    

 在data中定义tableData:

tableData: [{
          date: '1',
          name: '王小虎',
          address: '上海市普'
        },{
          date: '1',
          name: '王小虎',
          address: '上海市普'
        }],

 在methods中定义方法：

//编辑表格
    tableDbEdit(row, column, cell, event) {
          console.log(row, column, cell, event);
          if (column.label != "操作") {//哪些字段不可编辑，可以在if里面做限制，可编辑的字段往下执行
            event.target.innerHTML = "";
            //双击添加一个input框
            let cellInput = document.createElement("input");
            cellInput.value = "";
            //设置input框的类型，宽，padding，边框，圆角等都可以自己设置
            cellInput.setAttribute("type", "text");
            cellInput.style.width = "80%";
            cellInput.style.padding = "0px"
            cellInput.style.border = "1px solid #288EFE";
            cellInput.style.borderRadius = "3px";
            cell.appendChild(cellInput);
            //当鼠标失去焦点时，判断输入是否为空，为空的话可以删除input
            cellInput.onblur = function() {
              if(cellInput.value==""&&column.label=="字段名"){
                message_w("字段名不能为空")
                cellInput.style.border = "1px solid #FD1B1E";
              }else{
                cell.removeChild(cellInput);
                event.target.innerHTML = cellInput.value;
              }
            };
        }
    },
    //新增表格
    add_twoTableDelete(){
      this.tableData.push({
          date: 'now',
          name: '新增的',
          address: '上海市普'
        })
    },

 样式我就不粘了，methods中的两个方法，可以自己定义并添加到某个按钮上，下面是我的页面：

编辑的话就双击就好了，字段名和描述信息都可以编辑

    

点击新增就是在表格尾部增加一行自己定义的