vue + element table 行内增删改

• html

<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>

• js

 add() {
      this.tableData.unshift({
        name: '',
        address: ''
      })
    },
    //编辑
    handleEdit(index, row) {
      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: '已取消'
        });
      });
    },