Vue+ElementUI 实现表格行内编辑

闲，水一波文章。
最终效果：

页面代码如下：

<el-table-column prop="propertyValue" label="属性值">
  <template slot-scope="scope">
    <span v-if="scope.row.isEditPropertyShow">
      <el-input v-model="scope.row.propertyValue" size="mini" placeholder="请输入内容" />
    </span>
    <span v-else>{{ scope.row.propertyValue }}</span>
   </template>
 </el-table-column>
 <el-table-column prop="address" label="操作">
   <template slot-scope="scope">
     <el-button v-if="!scope.row.isEditPropertyShow" type="primary" size="small" @click="editProperty(scope.row,scope.$index)">编辑</el-button>
      <div v-else>
         <el-button type="primary" plain size="small" @click="saveProperty(scope.row,scope.$index)">保存</el-button>
         <el-button size="small" @click="cancelProperty(scope.row,scope.$index)">取消</el-button>
       </div>
    </template>
 </el-table-column>

js代码：

    // 修改商品属性
    editProperty(row, index) {
      // 我这边是表格数据都是前端处理，需要把旧值存起来，用户点击修改之后修改了原来的数据，但是又点了取消的情况，还需要获取到原来的值
      sessionStorage.setItem('oldPropertValue', row.propertyValue)
      // isEditPropertyShow为ture展示输入框
      this.$set(this.propertyData[index], 'isEditPropertyShow', true)
    },
    // 保存商品属性
    saveProperty(row, index) {
      this.$set(this.propertyData[index], 'isEditPropertyShow', false)
    },
    // 取消商品属性编辑
    cancelProperty(row, index) {
      if (sessionStorage.getItem('oldPropertValue') !== 'null') {
        this.$set(this.propertyData[index], 'propertyValue', sessionStorage.getItem('oldPropertValue'))
      } else {
        this.$set(this.propertyData[index], 'propertyValue', '')
      }
      this.$set(this.propertyData[index], 'isEditPropertyShow', false)
    },