From 9d45f7a8dcbc516bf1ae17dd5532ebfad394e55f Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Mon, 2 Apr 2018 18:35:35 +0800
Subject: [PATCH] add table edit-row demo

---
 components/table/demo/basic.6.md  |  76 -------------------
 components/table/demo/edit-row.md | 121 ++++++++++++++++++++++++++++++
 2 files changed, 121 insertions(+), 76 deletions(-)
 delete mode 100644 components/table/demo/basic.6.md
 create mode 100644 components/table/demo/edit-row.md

diff --git a/components/table/demo/basic.6.md b/components/table/demo/basic.6.md
deleted file mode 100644
index 332ec9843..000000000
--- a/components/table/demo/basic.6.md
+++ /dev/null
@@ -1,76 +0,0 @@
-<cn>
-#### 基本用法
-简单的表格，最后一列是各种操作。
-</cn>
-
-<us>
-#### basic Usage
-Simple table with actions.
-</us>
-
-```html
-<template>
-  <a-table :columns="columns" :dataSource="data">
-    <template slot="name" slot-scope="text">
-      <a href="#">{{text}}</a>
-    </template>
-    <template slot="action" slot-scope="text, record">
-      <span>
-        <a href="#">Action 一 {{record.name}}</a>
-        <a-divider type="vertical" />
-        <a href="#">Delete</a>
-        <a-divider type="vertical" />
-        <a href="#" class="ant-dropdown-link">
-          More actions <a-icon type="down" />
-        </a>
-      </span>
-    </template>
-  </a-table>
-</template>
-<script>
-const columns = [{
-  title: 'Name',
-  dataIndex: 'name',
-  key: 'name',
-  slotScopeName: 'name',
-}, {
-  title: 'Age',
-  dataIndex: 'age',
-  key: 'age',
-}, {
-  title: 'Address',
-  dataIndex: 'address',
-  key: 'address',
-}, {
-  title: 'Action',
-  key: 'action',
-  slotScopeName: 'action',
-}];
-
-const data = [{
-  key: '1',
-  name: 'John Brown',
-  age: 32,
-  address: 'New York No. 1 Lake Park',
-}, {
-  key: '2',
-  name: 'Jim Green',
-  age: 42,
-  address: 'London No. 1 Lake Park',
-}, {
-  key: '3',
-  name: 'Joe Black',
-  age: 32,
-  address: 'Sidney No. 1 Lake Park',
-}];
-
-export default {
-  data() {
-    return {
-      data,
-      columns,
-    }
-  }
-}
-</script>
-```
diff --git a/components/table/demo/edit-row.md b/components/table/demo/edit-row.md
new file mode 100644
index 000000000..fd243c112
--- /dev/null
+++ b/components/table/demo/edit-row.md
@@ -0,0 +1,121 @@
+<cn>
+#### 可编辑行
+带行编辑功能的表格。
+</cn>
+
+<us>
+#### Editable Rows
+Table with editable rows.
+</us>
+
+```html
+<template>
+  <a-table :columns="columns" :dataSource="data" bordered>
+    <div v-for="col in ['name', 'age', 'address']" :key="col" :slot="col" slot-scope="text, record, index">
+      <a-input
+        v-if="record.editable"
+        style="margin: -5px 0"
+        :value="text"
+        @change="e => handleChange(e.target.value, record.key, col)"
+      />
+      <template v-else>{{text}}</template>
+    </div>
+    <template slot="operation" slot-scope="text, record, index">
+      <div class='editable-row-operations'>
+        <span v-if="record.editable">
+          <a @click="() => save(record.key)">Save</a>
+          <a-popconfirm title='Sure to cancel?' @confirm="() => cancel(record.key)">
+            <a>Cancel</a>
+          </a-popconfirm>
+        </span>
+        <span v-else>
+          <a @click="() => edit(record.key)">Edit</a>
+        </span>
+      </div>
+    </template>
+  </a-table>
+</template>
+<script>
+const columns = [{
+  title: 'name',
+  dataIndex: 'name',
+  width: '25%',
+  scopedSlots: { customRender: 'name' },
+}, {
+  title: 'age',
+  dataIndex: 'age',
+  width: '15%',
+  scopedSlots: { customRender: 'age' },
+}, {
+  title: 'address',
+  dataIndex: 'address',
+  width: '40%',
+  scopedSlots: { customRender: 'address' },
+}, {
+  title: 'operation',
+  dataIndex: 'operation',
+  scopedSlots: { customRender: 'operation' },
+}]
+
+const data = []
+for (let i = 0; i < 100; i++) {
+  data.push({
+    key: i.toString(),
+    name: `Edrward ${i}`,
+    age: 32,
+    address: `London Park no. ${i}`,
+  })
+}
+export default {
+  data () {
+    this.cacheData = data.map(item => ({ ...item }))
+    return {
+      data,
+      columns,
+    }
+  },
+  methods: {
+    handleChange (value, key, column) {
+      const newData = [...this.data]
+      const target = newData.filter(item => key === item.key)[0]
+      if (target) {
+        target[column] = value
+        this.data = newData
+      }
+    },
+    edit (key) {
+      const newData = [...this.data]
+      const target = newData.filter(item => key === item.key)[0]
+      if (target) {
+        target.editable = true
+        this.data = newData
+      }
+    },
+    save (key) {
+      const newData = [...this.data]
+      const target = newData.filter(item => key === item.key)[0]
+      if (target) {
+        delete target.editable
+        this.data = newData
+        this.cacheData = newData.map(item => ({ ...item }))
+      }
+    },
+    cancel (key) {
+      const newData = [...this.data]
+      const target = newData.filter(item => key === item.key)[0]
+      if (target) {
+        Object.assign(target, this.cacheData.filter(item => key === item.key)[0])
+        delete target.editable
+        this.data = newData
+      }
+    },
+  },
+}
+</script>
+<style scoped>
+.editable-row-operations a {
+  margin-right: 8px;
+}
+</style>
+```
+