闲，水一波文章。
最终效果：
image.png
页面代码如下：
<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)
},