From ebc2ac08b716804cd6342e7155472337f977fd4a Mon Sep 17 00:00:00 2001 From: Pan Date: Fri, 8 Dec 2017 11:07:20 +0800 Subject: [PATCH] add(inlineEditable): add the calcel btn to restore the title --- src/views/example/table/inlineEditTable.vue | 40 ++++++++++++++++++--- 1 file changed, 36 insertions(+), 4 deletions(-) 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 @@ @@ -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' + }) } } } + +