优化新式表单渲染逻辑

Aaron
1 parent f27f3d42
Showing 5 changed files with 42 additions and 5 deletions Show diff stats
examples/views/page/form-new/dynamic-render.js
examples/views/page/form-new/form-render.vue
examples/views/page/form-new/index.vue
examples/views/page/other.vue
examples/views/page/table-new/index.vue
@@ -0,0 +1,6 @@
+export default {
+  functional: true,
+  render(h, context) {
+    return context.props.render;
+  }
+}
 \ No newline at end of file
@@ -26,7 +26,17 @@
       >
         <el-form-item :label="item.label" :label-width="item.labelWidth" :prop="item.fullKey" :rules="item.rules" :class="itemClass || 'eagle-form__item'">
           <!-- 自定义组件 -->
-          <component :is="item.type" :value="itemValue(item)" @input="v => onInput({ value: v, item })"
+          <dynamic-render v-if="typeof item.type === 'function'"
+            :render="item.type($createElement, { model: value, config: {
+              props: { ...item.props, value: itemValue(item) },
+              style: item.style || { maxWidth: '100%' },
+              on: {
+                ...bindItemEvent(item),
+                input: v => onInput({ value: v, item })
+              }
+            } })"
+          ></dynamic-render>
+          <component v-else :is="item.type" :value="itemValue(item)" @input="v => onInput({ value: v, item })"
             v-on="bindItemEvent(item)" v-bind="item.props" :style="item.style || { maxWidth: '100%' }"
           ></component>
         </el-form-item>
@@ -36,8 +46,11 @@
 </template>
 <script>
+import DynamicRender from './dynamic-render';
+
 export default {
   name: 'form-render',
+  components: { DynamicRender },
   props: {
     list: Array,
     model: Object,
@@ -17,6 +17,7 @@
 <template>
   <el-form ref="form" size="mini" :class="formClass" :model="formModel" :label-width="labelWidth" :label-position="labelPosition || labelWidth ? 'right' : 'top'">
+    <!-- <dynamic-render :render="$createElement('el-tag', { props: { type: 'danger' } }, ['Tag', $createElement('el-tag', { props: { size: 'mini' } }, ['Tag'])])"></dynamic-render> -->
     <form-render :title-class="titleClass" :content-class="contentClass" :item-class="itemClass" :group-class="groupClass"
       :list="formList" :value="model" :model="model" :span="span" :type="type"
       @item-change="onItemChange" @form-item-change="onFormItemChange" @item-update="onItemUpdate"
@@ -26,11 +27,12 @@
 <script>
 import FormRender from './form-render';
+import DynamicRender from './dynamic-render';
 import { cloneDeep, set } from './util';
 export default {
   name: 'FormNew',
-  components: { FormRender },
+  components: { FormRender, DynamicRender },
   props: {
     value: Object,
     list: Array,
@@ -48,6 +50,9 @@ export default {
     }
   },
   data() {
+    const $fullProps = { ...this.$attrs, ...this.$props };
+    console.log($fullProps);
+    console.log(this);
     return {
       model: {},
       formModel: {},
@@ -88,6 +93,9 @@ export default {
     }
   },
   methods: {
+    handleInput(value) {
+      console.log(value);
+    },
     /**
      * @description 表单项值变化
      * @param {Object} item 表单项值对象
@@ -47,7 +47,7 @@
     <!-- <eg-form ref="form" v-model="model" :list="option.list" @validate="onValidate" label-width="80px" :span="6" type="div"></eg-form> -->
     <eg-form
       ref="form" v-model="model" :list="option.list" @validate="onValidate" :span="4"
-      group-class="custom-group"
+      group-class="custom-group" :just-a-text-props="() => 'test'"
       form-class="custom-form" title-class="custom-title" content-class="custom-content" item-class="custom-item"
     ></eg-form>
   </div>
@@ -74,7 +74,17 @@ export default {
           {
             group: { title: '基础信息', span: 12 },
             list: [
-              { type: 'el-input', label: '名称', key: 'name' },
+              {
+                type(h, { config }) {
+                  return h(
+                    'el-tooltip',
+                    { props: { content: '这里是提示', placement: 'top', effect: 'dark' } },
+                    [h('el-input', config)]
+                  )
+                },
+                label: '名称',
+                key: 'name'
+              },
               { 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}]`)])
@@ -17,7 +17,7 @@
           <!-- 如果有表格列具名插槽 -->
           <slot v-if="$scopedSlots[item.keyPath.join('-')]" :name="item.keyPath.join('-')" v-bind="item"></slot>
           <!-- 默认表格列渲染 -->
-          <el-table-column v-else v-bind="item" :prop="item.fullKey || item.key" :key="index" :min-width="minWidth || item.minWidth || item['min-width']">
+          <el-table-column v-else v-bind="{ ...item, type: undefined }" :prop="item.fullKey || item.key" :key="index" :min-width="minWidth || item.minWidth || item['min-width']">
             <template #default="{ row, column, $index }">
               <cell-render :row="row" :item="item">
                 <!-- 如果有表格列值渲染具名插槽 -->
	@@ -0,0 +1,6 @@		@@ -0,0 +1,6 @@
		1	+export default {
		2	+ functional: true,
		3	+ render(h, context) {
		4	+ return context.props.render;
		5	+ }
		6	+}
0	\ No newline at end of file	7	\ No newline at end of file
	@@ -17,7 +17,7 @@		@@ -17,7 +17,7 @@
17	<!-- 如果有表格列具名插槽 -->	17	<!-- 如果有表格列具名插槽 -->
18	<slot v-if="$scopedSlots[item.keyPath.join('-')]" :name="item.keyPath.join('-')" v-bind="item"></slot>	18	<slot v-if="$scopedSlots[item.keyPath.join('-')]" :name="item.keyPath.join('-')" v-bind="item"></slot>
19	<!-- 默认表格列渲染 -->	19	<!-- 默认表格列渲染 -->
20	- <el-table-column v-else v-bind="item" :prop="item.fullKey \|\| item.key" :key="index" :min-width="minWidth \|\| item.minWidth \|\| item['min-width']">	20	+ <el-table-column v-else v-bind="{ ...item, type: undefined }" :prop="item.fullKey \|\| item.key" :key="index" :min-width="minWidth \|\| item.minWidth \|\| item['min-width']">
21	<template #default="{ row, column, $index }">	21	<template #default="{ row, column, $index }">
22	<cell-render :row="row" :item="item">	22	<cell-render :row="row" :item="item">
23	<!-- 如果有表格列值渲染具名插槽 -->	23	<!-- 如果有表格列值渲染具名插槽 -->