framework / eagle-web-toolkit

Download as
Browse Code »

Commit 7f08f95a87e8438312040614f7f1c4a331e160a4

Authored by Aaron
1 parent f27f3d42
Exists in master and in 1 other branch legacy

优化新式表单渲染逻辑

Showing 5 changed files with 42 additions and 5 deletions   Show diff stats
examples/views/page/form-new/dynamic-render.js 0 → 100644
  Diff comments   View file @7f08f95
... ... @@ -0,0 +1,6 @@
  1 +export default {
  2 + functional: true,
  3 + render(h, context) {
  4 + return context.props.render;
  5 + }
  6 +}
0 7 \ No newline at end of file
... ...
examples/views/page/form-new/form-render.vue
  Diff comments   View file @7f08f95
... ... @@ -26,7 +26,17 @@
26 26 >
27 27 <el-form-item :label="item.label" :label-width="item.labelWidth" :prop="item.fullKey" :rules="item.rules" :class="itemClass || 'eagle-form__item'">
28 28 <!-- 自定义组件 -->
29   - <component :is="item.type" :value="itemValue(item)" @input="v => onInput({ value: v, item })"
  29 + <dynamic-render v-if="typeof item.type === 'function'"
  30 + :render="item.type($createElement, { model: value, config: {
  31 + props: { ...item.props, value: itemValue(item) },
  32 + style: item.style || { maxWidth: '100%' },
  33 + on: {
  34 + ...bindItemEvent(item),
  35 + input: v => onInput({ value: v, item })
  36 + }
  37 + } })"
  38 + ></dynamic-render>
  39 + <component v-else :is="item.type" :value="itemValue(item)" @input="v => onInput({ value: v, item })"
30 40 v-on="bindItemEvent(item)" v-bind="item.props" :style="item.style || { maxWidth: '100%' }"
31 41 ></component>
32 42 </el-form-item>
... ... @@ -36,8 +46,11 @@
36 46 </template>
37 47  
38 48 <script>
  49 +import DynamicRender from './dynamic-render';
  50 +
39 51 export default {
40 52 name: 'form-render',
  53 + components: { DynamicRender },
41 54 props: {
42 55 list: Array,
43 56 model: Object,
... ...
examples/views/page/form-new/index.vue
  Diff comments   View file @7f08f95
... ... @@ -17,6 +17,7 @@
17 17  
18 18 <template>
19 19 <el-form ref="form" size="mini" :class="formClass" :model="formModel" :label-width="labelWidth" :label-position="labelPosition || labelWidth ? 'right' : 'top'">
  20 + <!-- <dynamic-render :render="$createElement('el-tag', { props: { type: 'danger' } }, ['Tag', $createElement('el-tag', { props: { size: 'mini' } }, ['Tag'])])"></dynamic-render> -->
20 21 <form-render :title-class="titleClass" :content-class="contentClass" :item-class="itemClass" :group-class="groupClass"
21 22 :list="formList" :value="model" :model="model" :span="span" :type="type"
22 23 @item-change="onItemChange" @form-item-change="onFormItemChange" @item-update="onItemUpdate"
... ... @@ -26,11 +27,12 @@
26 27  
27 28 <script>
28 29 import FormRender from './form-render';
  30 +import DynamicRender from './dynamic-render';
29 31 import { cloneDeep, set } from './util';
30 32  
31 33 export default {
32 34 name: 'FormNew',
33   - components: { FormRender },
  35 + components: { FormRender, DynamicRender },
34 36 props: {
35 37 value: Object,
36 38 list: Array,
... ... @@ -48,6 +50,9 @@ export default {
48 50 }
49 51 },
50 52 data() {
  53 + const $fullProps = { ...this.$attrs, ...this.$props };
  54 + console.log($fullProps);
  55 + console.log(this);
51 56 return {
52 57 model: {},
53 58 formModel: {},
... ... @@ -88,6 +93,9 @@ export default {
88 93 }
89 94 },
90 95 methods: {
  96 + handleInput(value) {
  97 + console.log(value);
  98 + },
91 99 /**
92 100 * @description 表单项值变化
93 101 * @param {Object} item 表单项值对象
... ...
examples/views/page/other.vue
  Diff comments   View file @7f08f95
... ... @@ -47,7 +47,7 @@
47 47 <!-- <eg-form ref="form" v-model="model" :list="option.list" @validate="onValidate" label-width="80px" :span="6" type="div"></eg-form> -->
48 48 <eg-form
49 49 ref="form" v-model="model" :list="option.list" @validate="onValidate" :span="4"
50   - group-class="custom-group"
  50 + group-class="custom-group" :just-a-text-props="() => 'test'"
51 51 form-class="custom-form" title-class="custom-title" content-class="custom-content" item-class="custom-item"
52 52 ></eg-form>
53 53 </div>
... ... @@ -74,7 +74,17 @@ export default {
74 74 {
75 75 group: { title: '基础信息', span: 12 },
76 76 list: [
77   - { type: 'el-input', label: '名称', key: 'name' },
  77 + {
  78 + type(h, { config }) {
  79 + return h(
  80 + 'el-tooltip',
  81 + { props: { content: '这里是提示', placement: 'top', effect: 'dark' } },
  82 + [h('el-input', config)]
  83 + )
  84 + },
  85 + label: '名称',
  86 + key: 'name'
  87 + },
78 88 { type: 'el-input-number', label: '年龄', key: 'age',
79 89 render(h, { row, value }) {
80 90 return h('el-tag', { props: { type: 'warning', size: 'mini' } }, [h('span', `${value}[${row.name}]`)])
... ...
examples/views/page/table-new/index.vue
  Diff comments   View file @7f08f95
... ... @@ -17,7 +17,7 @@
17 17 <!-- 如果有表格列具名插槽 -->
18 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 21 <template #default="{ row, column, $index }">
22 22 <cell-render :row="row" :item="item">
23 23 <!-- 如果有表格列值渲染具名插槽 -->
... ...