优化新式表格渲染逻辑

Aaron
1 parent 004eaf47
Showing 4 changed files with 40 additions and 20 deletions Show diff stats
examples/views/page/other.vue
examples/views/page/table-new/cell-value-render.js
examples/views/page/table-new/editable.vue
examples/views/page/table-new/index.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}]`)])
+                }
+              },
             ],
           },
           {
@@ -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
@@ -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) =&gt; {
 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) {
@@ -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);
	@@ -0,0 +1,24 @@		@@ -0,0 +1,24 @@
		1	+import { get } from '../form-new/util';
		2	+
		3	+export default {
		4	+ props: { row: Object, column: Object, index: [Number,String], item: Object },
		5	+ render(h) {
		6	+ const { row, column, index, item } = this;
		7	+ if (typeof item.render === 'function') {
		8	+ return item.render(h, { row, value: get(row, item.fullKey), $index: index, column });
		9	+ } else {
		10	+ if (item.render.children instanceof Function) {
		11	+ return h(
		12	+ item.render.type,
		13	+ { props: item.render.props, attrs: item.render.props, style: item.render.style },
		14	+ item.render.children({ row, value: get(row, item.fullKey), $index: index, column })
		15	+ );
		16	+ }
		17	+ return h(
		18	+ item.render.type,
		19	+ { props: item.render.props, attrs: item.render.props, style: item.render.style },
		20	+ item.render.children \|\| get(row, item.fullKey)
		21	+ );
		22	+ }
		23	+ }
		24	+}
0	\ No newline at end of file	25	\ No newline at end of file