From 600fee60a54f57d0d026c2c3bd5cc0e17f43fcab Mon Sep 17 00:00:00 2001
From: Aaron <427787340@qq.com>
Date: Tue, 31 Dec 2019 17:54:21 +0800
Subject: [PATCH] 优化新式表格渲染逻辑

---
 examples/views/page/other.vue                      |  8 ++++++--
 examples/views/page/table-new/cell-value-render.js | 24 ++++++++++++++++++++++++
 examples/views/page/table-new/editable.vue         | 15 ++++++---------
 examples/views/page/table-new/index.vue            | 13 ++++---------
 4 files changed, 40 insertions(+), 20 deletions(-)
 create mode 100644 examples/views/page/table-new/cell-value-render.js

diff --git a/examples/views/page/other.vue b/examples/views/page/other.vue
index 577026f..1aef334 100644
--- a/examples/views/page/other.vue
+++ b/examples/views/page/other.vue
@@ -39,7 +39,7 @@
 
 <script>
 import EgForm from './form-new';
-import EgTable from './table-new/editable';
+import EgTable from './table-new';
 
 export default {
   name: 'other',
@@ -59,7 +59,11 @@ export default {
             group: { title: '基础信息', span: 12 },
             list: [
               { type: 'el-input', label: '名称', key: 'name' },
-              { type: 'el-input-number', label: '年龄', key: 'age' },
+              { type: 'el-input-number', label: '年龄', key: 'age',
+                render(h, { row, value }) {
+                  return h('el-tag', { props: { type: 'warning', size: 'mini' } }, [h('span', `${value}[${row.name}]`)])
+                }
+              },
             ],
           },
           {
diff --git a/examples/views/page/table-new/cell-value-render.js b/examples/views/page/table-new/cell-value-render.js
new file mode 100644
index 0000000..16111a2
--- /dev/null
+++ b/examples/views/page/table-new/cell-value-render.js
@@ -0,0 +1,24 @@
+import { get } from '../form-new/util';
+
+export default {
+  props: { row: Object, column: Object, index: [Number,String], item: Object },
+  render(h) {
+    const { row, column, index, item } = this;
+    if (typeof item.render === 'function') {
+      return item.render(h, { row, value: get(row, item.fullKey), $index: index, column });
+    } else {
+      if (item.render.children instanceof Function) {
+        return h(
+          item.render.type,
+          { props: item.render.props, attrs: item.render.props, style: item.render.style },
+          item.render.children({ row, value: get(row, item.fullKey), $index: index, column })
+        );
+      }
+      return h(
+        item.render.type,
+        { props: item.render.props, attrs: item.render.props, style: item.render.style },
+        item.render.children || get(row, item.fullKey)
+      );
+    }
+  }
+}
\ No newline at end of file
diff --git a/examples/views/page/table-new/editable.vue b/examples/views/page/table-new/editable.vue
index f137179..6c92a5a 100644
--- a/examples/views/page/table-new/editable.vue
+++ b/examples/views/page/table-new/editable.vue
@@ -37,10 +37,7 @@
                     :row="row" :value="$_get(row, item.fullKey)" :column="column" :index="$index"
                   ></slot>
                   <!-- 如果表格列配置了值渲染参数 -->
-                  <component v-else-if="item.render" :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>
+                  <cell-value-render v-else-if="item.render" :row="row" :column="column" :index="$index" :item="item" />
                 </cell-editable>
               </template>
             </el-table-column>
@@ -58,6 +55,7 @@
 <script>
 import { cloneDeep, get, set } from '../form-new/util';
 import CellEditable from './cell-editable';
+import CellValueRender from './cell-value-render';
 
 const listHasKey = (list, name) => {
   let result = false;
@@ -72,7 +70,10 @@ const listHasKey = (list, name) => {
 
 export default {
   name: 'TableNew',
-  components: { CellEditable },
+  components: {
+    CellEditable,
+    CellValueRender,
+  },
   props: {
     // 用于实例化本组件绑定v-model的值
     value: Array,
@@ -245,10 +246,6 @@ export default {
       }
       return result;
     },
-    // 处理表格项渲染时的子值
-    bindItemRenderChildren(item, scope) {
-      return item.render.children instanceof Function ? item.render.children(scope) : this.$_get(scope.row, item.fullKey)
-    },
     // 双击单元格
     onCellDblclick(row, column, cell, event) {
       if (this.editable && !this.rowNew) {
diff --git a/examples/views/page/table-new/index.vue b/examples/views/page/table-new/index.vue
index ef7055f..ae7eeeb 100644
--- a/examples/views/page/table-new/index.vue
+++ b/examples/views/page/table-new/index.vue
@@ -25,10 +25,7 @@
                   :row="row" :value="$_get(row, item.fullKey)" :column="column" :index="$index"
                 ></slot>
                 <!-- 如果表格列配置了值渲染参数 -->
-                <component v-else-if="item.render" :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>
+                <cell-value-render v-else-if="item.render" :row="row" :column="column" :index="$index" :item="item" />
               </cell-render>
             </template>
           </el-table-column>
@@ -44,6 +41,7 @@
 
 <script>
 import { cloneDeep, get, set } from '../form-new/util';
+import CellValueRender from './cell-value-render';
 
 export default {
   name: 'TableNew',
@@ -57,7 +55,8 @@ export default {
           return h('span', get(this.row, this.item.agentKey || this.item.fullKey));
         }
       },
-    }
+    },
+    CellValueRender
   },
   props: {
     // 用于实例化本组件绑定v-model的值
@@ -145,10 +144,6 @@ export default {
       }
       return result;
     },
-    // 处理表格项渲染时的子值
-    bindItemRenderChildren(item, scope) {
-      return item.render.children instanceof Function ? item.render.children(scope) : this.$_get(scope.row, item.fullKey)
-    },
     // 表格选中
     onSelectionChange(selection) {
       this.$emit('selection', selection);
--
libgit2 0.21.0