SOURCE

var app = new Vue({
  el: '#app',
  data: {
    drawRates: {
      showEdit: [],
      showBtn: [],
      editIndex:'',
      editData: '',
      //储存编辑数据
    },
    tableData: [{
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄'
    },
    {
      name: '王小虎',
      address: '上海市普陀区金沙江路 1517 弄'
    },
    {
      name: '王小虎',
      address: '上海市普陀区金沙江路 1519 弄'
    },
    {
      name: '王小虎',
      address: '上海市普陀区金沙江路 1516 弄'
    }]
  },
  methods: {
    add() {
      let obj = {
               name: '',
        address: ''
            }
            this.tableData.push(obj)
       this.handleEdit(this.tableData.length - 1, obj)
    },
    //编辑
    handleEdit(index, row) {
      this.handleUpdate(this.drawRates.editIndex, this.drawRates.editData)
      this.drawRates.editIndex = index
      let obj = JSON.parse(JSON.stringify(row));
      this.drawRates.editData = obj;
      this.drawRates.showEdit[index] = true;
      this.drawRates.showBtn[index] = true;
      this.$set(this.drawRates.showEdit, index, true);
      this.$set(this.drawRates.showBtn, index, true);
    },
    //取消编辑
    handelCancel(index, row) { //需要重新赋值
      this.drawRates.showEdit[index] = false;
      this.drawRates.showBtn[index] = false;
      this.$set(this.drawRates.showEdit, index, false);
      this.$set(this.drawRates.showBtn, index, false);
      this.tableData[index] = this.drawRates.editData;
      this.drawRates.editData = '';
    },
    //点击更新
    handleUpdate(index, row) {
      this.drawRates.showEdit[index] = false;
      this.drawRates.showBtn[index] = false;
      this.$set(this.drawRates.showEdit, index, false);
      this.$set(this.drawRates.showBtn, index, false);
      this.drawRates.editData = '';
    },
    //点击删除
    handleDelete(index, row) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tableData.splice(index, 1);
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).
      catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },

  },
})

<div id="app">
  <el-table class="mt-10 tableIconStyle" :data="tableData" element-loading-text="加载中"
  element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)"
  border fit stripe highlight-current-row tooltip-effect="dark" ref="singleTable">
    <el-table-column type="index" align="center" label='序号' width="60">
    </el-table-column>
    <el-table-column label='姓名' min-width="220">
      <template slot-scope="{row,$index}">
        <el-input v-if="drawRates.showEdit[$index]" v-model="row.name" clearable
        maxlength="50">
        </el-input>
        <span v-if="!drawRates.showEdit[$index]">
          {{row.name}}
        </span>
      </template>
    </el-table-column>
    <el-table-column show-overflow-tooltip label='地址' min-width="220">
      <template slot-scope="{row,$index}">
        <el-input v-if="drawRates.showEdit[$index]" v-model="row.address" clearable
        maxlength="50">
        </el-input>
        <span v-if="!drawRates.showEdit[$index]">
          {{row.address}}
        </span>
      </template>
    </el-table-column>
    <el-table-column align="left" width="220">
      <template slot="header" slot-scope="scope">
        <el-button type="button" size="small" @click="add">
          添加
        </el-button>
      </template>
      <template slot-scope="{row,$index}">
        <el-button type="button" size="small" @click="handleUpdate($index, row)"
        v-if="drawRates.showBtn[$index]">
          更新
        </el-button>
        <el-button type="button" size="small" @click="handelCancel($index, row)"
        v-if="drawRates.showBtn[$index]">
          取消
        </el-button>
        <el-button type="button" size="small" @click="handleEdit($index, row)"
        v-if="!drawRates.showBtn[$index]">
          编辑
        </el-button>
        <el-button type="button" size="small" @click="handleDelete($index, row)"
        v-if="!drawRates.showBtn[$index]">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</div>

 * {
   margin: 0;
   padding: 0
 }
 
 body {
   font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
   overflow: auto;
   font-weight: 400;
   -webkit-font-smoothing: antialiased;
 }
 
 .tb-edit .el-input {
   display: none
 }
 
 .tb-edit .current-row .el-input {
   display: block
 }
 
 .tb-edit .current-row .el-input+span {
   display: none
 }