From 984d820ea9f54e084efcac66c20261827cf41edd Mon Sep 17 00:00:00 2001
From: Aaron <427787340@qq.com>
Date: Thu, 26 Dec 2019 18:33:30 +0800
Subject: [PATCH] 新式表格支持行内编辑

---
 examples/views/page/other.vue           |  2 +-
 examples/views/page/table-new/index.vue | 87 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--------------
 packages/scheme/index.vue               |  2 +-
 3 files changed, 75 insertions(+), 16 deletions(-)

diff --git a/examples/views/page/other.vue b/examples/views/page/other.vue
index 6efc7aa..a6fb804 100644
--- a/examples/views/page/other.vue
+++ b/examples/views/page/other.vue
@@ -76,7 +76,7 @@ export default {
                   // { type: 'el-input', label: '市', key: 'city', render: { type: 'el-tag', props: { type: 'danger', size: 'mini' } } },
                   { type: 'el-input', label: '市', key: 'city',
                     render: {
-                      type: 'span', props: { href: 'https:///www.baidu.com/' }, style: { color: 'red' },
+                      type: 'a', props: { href: 'https:///www.baidu.com/', target: '_blank' }, style: { color: 'red' },
                       children({ row }) {
                         const { location: { district: { city } = {} } = {} } = row;
                         return city ? `${city}[城市]` : '';
diff --git a/examples/views/page/table-new/index.vue b/examples/views/page/table-new/index.vue
index 890ed1b..3055a93 100644
--- a/examples/views/page/table-new/index.vue
+++ b/examples/views/page/table-new/index.vue
@@ -2,49 +2,93 @@
 .eagle-table {
   width: 100%;
 }
+.eagle-table-cell-edit {
+  display: flex;
+  align-items: center;
+}
 </style>
 
 <template>
-  <div>
+  <div @keyup.enter="editCell = {}">
     <pre>{{ tableList }}</pre>
-    <el-table class="eagle-table" ref="table" :data="tableData" v-bind="{ size: 'small', ...tableProps }" v-on="tableEvents">
+    <el-table class="eagle-table" ref="table" :data="tableData" v-bind="{ size: 'small', ...tableProps }" v-on="tableEvents" @cell-dblclick="onCellDblclick">
+      <!-- 默认表格插槽 -->
       <slot name="default"></slot>
+      <!-- 根据配置列表生成表格列 -->
       <template v-if="tableList && tableList.length > 0">
         <template v-for="(item, index) in tableList">
           <template v-if="bindItemVisible(item.visible)">
+            <!-- 如果有表格列具名插槽 -->
             <slot v-if="$scopedSlots[item.keyPath.join('-')] || $slots[item.keyPath.join('-')]" :name="item.keyPath.join('-')" v-bind="item"></slot>
+            <!-- 如果有表格列值渲染具名插槽 -->
             <el-table-column v-else-if="$scopedSlots[`value-${item.keyPath.join('-')}`] || $slots[`value-${item.keyPath.join('-')}`]"
               v-bind="item" :prop="item.agentKey || item.fullKey || item.key" :key="index"
               :min-width="item.minWidth || item['min-width']"
             >
-              <slot slot-scope="{ row, column, $index }" :name="`value-${item.keyPath.join('-')}`" v-bind="item"
-                :row="row" :value="$_get(row, item.fullKey)" :column="column" :index="$index"
-              ></slot>
+              <template slot-scope="{ row, column, $index }">
+                <div v-if="editCell.index === row.$index && editCell.key === (item.agentKey || item.fullKey || item.key)" class="eagle-table-cell-edit">
+                  <component
+                    :value="$_get(row, item.fullKey)"
+                    :is="item.type" v-bind="item.props" :style="item.style" size="mini"
+                    @input="v => onCellUpdate({ value: v, row, key: item.fullKey })"
+                  ></component>
+                  <el-button type="text" icon="el-icon-check" @click="editCell = {}"></el-button>
+                </div>
+                <slot v-else :name="`value-${item.keyPath.join('-')}`" v-bind="item"
+                  :row="row" :value="$_get(row, item.fullKey)" :column="column" :index="$index"
+                ></slot>
+              </template>
             </el-table-column>
+            <!-- 如果表格列配置了值渲染参数 -->
             <el-table-column v-else-if="item.render" v-bind="item" :prop="item.agentKey || item.fullKey || item.key"
               :key="index" :min-width="item.minWidth || item['min-width']"
             >
-              <template slot-scope="slotScope">
-                <component :is="item.render.type" v-bind="item.render.props" :style="item.render.style">
-                  <template v-if="item.render.children">{{ bindItemRenderChildren(item, slotScope) }}</template>
-                  <template v-else>{{ $_get(row, item.fullKey) }}</template>
-                </component>
+              <template slot-scope="{ row, column, $index }">
+                <div v-if="editCell.index === row.$index && editCell.key === (item.agentKey || item.fullKey || item.key)" class="eagle-table-cell-edit">
+                  <component
+                    :value="$_get(row, item.fullKey)"
+                    :is="item.type" v-bind="item.props" :style="item.style" size="mini"
+                    @input="v => onCellUpdate({ value: v, row, key: item.fullKey })"
+                  ></component>
+                  <el-button type="text" icon="el-icon-check" @click="editCell = {}"></el-button>
+                </div>
+                <template v-else>
+                  <component :is="item.render.type" v-bind="item.render.props" :style="item.render.style">
+                    <template v-if="item.render.children">{{ bindItemRenderChildren(item, { row, column, $index }) }}</template>
+                    <template v-else>{{ $_get(row, item.fullKey) }}</template>
+                  </component>
+                </template>
               </template>
             </el-table-column>
+            <!-- 默认表格列渲染 -->
             <el-table-column v-else v-bind="item" :prop="item.agentKey || item.fullKey || item.key"
-              :key="index" :min-width="item.minWidth || item['min-width']"
-            ></el-table-column>
+              :key="index" :min-width="item.minWidth || item['min-width'] || 120"
+            >
+              <template slot-scope="{ row }">
+                <div v-if="editCell.index === row.$index && editCell.key === (item.agentKey || item.fullKey || item.key)" class="eagle-table-cell-edit">
+                  <component
+                    :value="$_get(row, item.fullKey)"
+                    :is="item.type" v-bind="item.props" :style="item.style" size="mini"
+                    @input="v => onCellUpdate({ value: v, row, key: item.fullKey })"
+                  ></component>
+                  <el-button type="text" icon="el-icon-check" @click="editCell = {}"></el-button>
+                </div>
+                <template v-else>{{ $_get(row, item.fullKey) }}</template>
+              </template>
+            </el-table-column>
           </template>
         </template>
       </template>
+      <!-- 已生成列表后的追加列插槽 -->
       <slot name="column-append"></slot>
+      <!-- 末尾列插槽 -->
       <slot name="column-end"></slot>
     </el-table>
   </div>
 </template>
 
 <script>
-import { cloneDeep, get } from '../form-new/util';
+import { cloneDeep, get, set } from '../form-new/util';
 
 export default {
   name: 'TableNew',
@@ -68,6 +112,7 @@ export default {
     return {
       tableList: [],
       tableData: [],
+      editCell: {},
     };
   },
   computed: {
@@ -81,7 +126,7 @@ export default {
   watch: {
     value: {
       handler(val = []) {
-        this.tableData = val;
+        this.tableData = val.map((o, i) => ({ ...o, $index: i }));
       },
       immediate: true
     },
@@ -137,6 +182,20 @@ export default {
     // 处理表格项渲染时的子值
     bindItemRenderChildren(item, scope) {
       return item.render.children instanceof Function ? item.render.children(scope) : this.$_get(scope.row, item.fullKey)
+    },
+    // 双击单元格
+    onCellDblclick(row, column, cell, event) {
+      this.editCell = { index: row.$index, key: column.property };
+    },
+    // 编辑表格更新值
+    onCellUpdate({ value, row, key }) {
+      const tableData = cloneDeep(this.tableData);
+      const tableRow = tableData[row.$index];
+      set(tableRow, key, value);
+      tableData[row.$index] = tableRow;
+      this.$set(this.tableData, row.$index, tableRow);
+      // this.tableData = tableData;
+      // this.$emit('input', tableData);
     }
   }
 };
diff --git a/packages/scheme/index.vue b/packages/scheme/index.vue
index 4e60f76..d4719d2 100644
--- a/packages/scheme/index.vue
+++ b/packages/scheme/index.vue
@@ -138,7 +138,7 @@
           ...tableEvents,
         }"
       >
-        <slot></slot>
+        <slot v-bind="slotMethod"></slot>
         <!-- 表格具名插槽 -->
         <template v-for="(item, index) in tableList || _tableList">
           <slot v-if="$scopedSlots[`table-${item.key}`] || $slots[`table-${item.key}`]" :name="`table-${item.key}`" :slot="item.key" v-bind="slotMethod"></slot>
--
libgit2 0.21.0