diff --git a/src/views/example/table/inlineEditTable.vue b/src/views/example/table/inlineEditTable.vue
index ef731a6c..350f0201 100644
--- a/src/views/example/table/inlineEditTable.vue
+++ b/src/views/example/table/inlineEditTable.vue
@@ -35,14 +35,18 @@
-
- {{ scope.row.title }}
+
+
+ cancel
+
+ {{ scope.row.title }}
- {{scope.row.edit?'完成':'编辑'}}
+ 完成
+ 编辑
@@ -84,12 +88,40 @@ export default {
fetchList(this.listQuery).then(response => {
const items = response.data.items
this.list = items.map(v => {
- this.$set(v, 'edit', false)
+ this.$set(v, 'edit', false) // https://vuejs.org/v2/guide/reactivity.html
+ v.originalTitle = v.title // will be used when user click the cancel botton
return v
})
this.listLoading = false
})
+ },
+ cancelEdit(row) {
+ row.title = row.originalTitle
+ row.edit = false
+ this.$message({
+ message: 'The title has been restored to the original value',
+ type: 'warning'
+ })
+ },
+ confirmEdit(row) {
+ row.edit = false
+ row.originalTitle = row.title
+ this.$message({
+ message: 'The title has been edited',
+ type: 'success'
+ })
}
}
}
+
+