閑捍靠，水一波文章伶授。
最終效果：
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="請輸入內(nèi)容" />
</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) {
// 我這邊是表格數(shù)據(jù)都是前端處理碍岔，需要把舊值存起來分俯，用戶點擊修改之后修改了原來的數(shù)據(jù)，但是又點了取消的情況慷吊，還需要獲取到原來的值
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)
},