el-form-renderer-vue3 1.0.4 → 1.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,98 +1,100 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
<
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
<
|
|
18
|
-
|
|
19
|
-
v-if="data.type === 'input'"
|
|
20
|
-
v-bind="componentProps"
|
|
21
|
-
:modelValue="itemValue"
|
|
22
|
-
readonly
|
|
23
|
-
v-on="listeners"
|
|
24
|
-
/>
|
|
25
|
-
|
|
26
|
-
<div v-else-if="data.type === 'select'">
|
|
27
|
-
{{ multipleValue }}
|
|
28
|
-
</div>
|
|
29
|
-
</template>
|
|
30
|
-
<!-- 处理 date-picker,cascader,动态渲染不显示文字 bug-->
|
|
31
|
-
<component
|
|
32
|
-
v-else-if="data.type === 'date-picker' || data.type === 'cascader'"
|
|
33
|
-
ref="customComponent"
|
|
34
|
-
v-bind:is="data.component || `el-${data.type || 'input'}`"
|
|
35
|
-
v-bind="componentProps"
|
|
36
|
-
:modelValue="itemValue"
|
|
37
|
-
:disabled="disabled || componentProps.disabled || readonly"
|
|
38
|
-
v-on="listeners"
|
|
39
|
-
:loading="loading"
|
|
40
|
-
:remote-method="data.remoteMethod || componentProps.remoteMethod || remoteMethod"
|
|
41
|
-
>
|
|
42
|
-
</component>
|
|
43
|
-
<!-- 绑定 模板引用 动态组件 props value值 是否禁用 事件 lodding 远端搜索方法 -->
|
|
44
|
-
<component
|
|
45
|
-
v-else
|
|
46
|
-
ref="customComponent"
|
|
47
|
-
v-bind:is="data.component || `el-${data.type || 'input'}`"
|
|
2
|
+
<!-- 绑定显示，校验匹配规则字段，label，rules校验规则，attrs（原生属性）， -->
|
|
3
|
+
<el-form-item
|
|
4
|
+
v-if="_show"
|
|
5
|
+
:prop="prop"
|
|
6
|
+
:label="typeof data.label === 'string' ? data.label : ''"
|
|
7
|
+
:rules="!readonly && Array.isArray(data.rules) ? data.rules : undefined"
|
|
8
|
+
v-bind="data.attrs"
|
|
9
|
+
class="render-form-item"
|
|
10
|
+
>
|
|
11
|
+
<!-- label插槽 -->
|
|
12
|
+
<template #label>
|
|
13
|
+
<v-node v-if="data.label !== 'string'" :content="data.label" />
|
|
14
|
+
</template>
|
|
15
|
+
<!-- 处理之只读input select -->
|
|
16
|
+
<template v-if="readonly && hasReadonlyContent">
|
|
17
|
+
<el-input
|
|
18
|
+
v-if="data.type === 'input'"
|
|
48
19
|
v-bind="componentProps"
|
|
49
20
|
:modelValue="itemValue"
|
|
50
|
-
|
|
21
|
+
readonly
|
|
51
22
|
v-on="listeners"
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
>
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
23
|
+
/>
|
|
24
|
+
|
|
25
|
+
<div v-else-if="data.type === 'select'">
|
|
26
|
+
{{ multipleValue }}
|
|
27
|
+
</div>
|
|
28
|
+
</template>
|
|
29
|
+
<!-- 处理 date-picker,cascader,动态渲染不显示文字 bug-->
|
|
30
|
+
<component
|
|
31
|
+
v-else-if="data.type === 'date-picker' || data.type === 'cascader'"
|
|
32
|
+
ref="customComponent"
|
|
33
|
+
v-bind:is="data.component || `el-${data.type || 'input'}`"
|
|
34
|
+
v-bind="componentProps"
|
|
35
|
+
:modelValue="itemValue"
|
|
36
|
+
:disabled="disabled || componentProps.disabled || readonly"
|
|
37
|
+
v-on="listeners"
|
|
38
|
+
:loading="loading"
|
|
39
|
+
:remote-method="
|
|
40
|
+
data.remoteMethod || componentProps.remoteMethod || remoteMethod
|
|
41
|
+
"
|
|
42
|
+
>
|
|
43
|
+
</component>
|
|
44
|
+
<!-- 绑定 模板引用 动态组件 props value值 是否禁用 事件 lodding 远端搜索方法 -->
|
|
45
|
+
<component
|
|
46
|
+
v-else
|
|
47
|
+
ref="customComponent"
|
|
48
|
+
v-bind:is="data.component || `el-${data.type || 'input'}`"
|
|
49
|
+
v-bind="componentProps"
|
|
50
|
+
:modelValue="itemValue"
|
|
51
|
+
:disabled="disabled || componentProps.disabled || readonly"
|
|
52
|
+
v-on="listeners"
|
|
53
|
+
:loading="loading"
|
|
54
|
+
:remote-method="
|
|
55
|
+
data.remoteMethod || componentProps.remoteMethod || remoteMethod
|
|
56
|
+
"
|
|
57
|
+
>
|
|
58
|
+
<!-- 插槽处理 选项-->
|
|
59
|
+
<template v-for="(opt, index) in options">
|
|
60
|
+
<el-option
|
|
61
|
+
v-if="data.type === 'select'"
|
|
62
|
+
:key="optionKey(opt) || index"
|
|
63
|
+
v-bind="opt"
|
|
64
|
+
/>
|
|
65
|
+
<el-checkbox-button
|
|
66
|
+
v-if="data.type === 'checkbox-group' && data.style === 'button'"
|
|
67
|
+
:key="opt.value"
|
|
68
|
+
v-bind="opt"
|
|
69
|
+
:label="'value' in opt ? opt.value : opt.label"
|
|
70
|
+
>
|
|
71
|
+
{{ opt.label }}
|
|
72
|
+
</el-checkbox-button>
|
|
73
|
+
<el-checkbox
|
|
74
|
+
v-else-if="data.type === 'checkbox-group' && data.style !== 'button'"
|
|
75
|
+
:key="opt.value"
|
|
76
|
+
v-bind="opt"
|
|
77
|
+
:label="'value' in opt ? opt.value : opt.label"
|
|
78
|
+
>
|
|
79
|
+
{{ opt.label }}
|
|
80
|
+
</el-checkbox>
|
|
81
|
+
<el-radio-button
|
|
82
|
+
v-else-if="data.type === 'radio-group' && data.style === 'button'"
|
|
83
|
+
:key="opt.label"
|
|
84
|
+
v-bind="opt"
|
|
85
|
+
:label="'value' in opt ? opt.value : opt.label"
|
|
86
|
+
>{{ opt.label }}</el-radio-button
|
|
87
|
+
>
|
|
88
|
+
<el-radio
|
|
89
|
+
v-else-if="data.type === 'radio-group' && data.style !== 'button'"
|
|
90
|
+
:key="opt.label"
|
|
91
|
+
v-bind="opt"
|
|
92
|
+
:label="'value' in opt ? opt.value : opt.label"
|
|
93
|
+
>{{ opt.label }}</el-radio
|
|
94
|
+
>
|
|
95
|
+
</template>
|
|
96
|
+
</component>
|
|
97
|
+
</el-form-item>
|
|
96
98
|
</template>
|
|
97
99
|
|
|
98
100
|
<script setup>
|
|
@@ -147,7 +149,9 @@ const isBlurTrigger =
|
|
|
147
149
|
// 计算props
|
|
148
150
|
const componentProps = computed(() => ({ ...props.data.el, ...propsInner }));
|
|
149
151
|
// 计算是否为只读 input select
|
|
150
|
-
const hasReadonlyContent = computed(() =>
|
|
152
|
+
const hasReadonlyContent = computed(() =>
|
|
153
|
+
["input", "select"].includes(props.data.type)
|
|
154
|
+
);
|
|
151
155
|
//执行传入的hidden
|
|
152
156
|
const hiddenStatus = computed(() => {
|
|
153
157
|
const hidden = props.data.hidden || (() => false);
|
|
@@ -266,7 +270,8 @@ watch(
|
|
|
266
270
|
// 现改写成：分开处理 remote.request，remote.url
|
|
267
271
|
// 至于为什么判断新旧值相同则返回，是因为 form 的 content 是响应式的，防止用户直接修改 content 其他内容时，导致 remote.request 重新发请求
|
|
268
272
|
|
|
269
|
-
if (!newValue || typeof newValue !== "function" || newValue === oldValue)
|
|
273
|
+
if (!newValue || typeof newValue !== "function" || newValue === oldValue)
|
|
274
|
+
return;
|
|
270
275
|
|
|
271
276
|
makingRequest(props.data.remote);
|
|
272
277
|
},
|
|
@@ -279,7 +284,8 @@ watch(
|
|
|
279
284
|
// 第三个判断条件：防止 url 与 request 同时存在时，发送两次请求
|
|
280
285
|
if (!url || url === oldV || (!oldV && props.data.remote.request)) return;
|
|
281
286
|
const request =
|
|
282
|
-
props.data.remote.request ||
|
|
287
|
+
props.data.remote.request ||
|
|
288
|
+
(() => axios.get(url).then((resp) => resp.data));
|
|
283
289
|
makingRequest(Object.assign({}, props.data.remote, { request }));
|
|
284
290
|
},
|
|
285
291
|
{ immediate: true }
|
|
@@ -1,35 +1,43 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
2
|
+
<el-form
|
|
3
|
+
ref="myelForm"
|
|
4
|
+
v-bind="$attrs"
|
|
5
|
+
:model="value"
|
|
6
|
+
class="el-form-renderer"
|
|
7
|
+
>
|
|
8
|
+
<template v-for="item in innerContent" :key="item.id">
|
|
9
|
+
<slot :name="`id:${item.id}`" />
|
|
10
|
+
<slot :name="`$id:${item.id}`" />
|
|
7
11
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
</
|
|
29
|
-
|
|
12
|
+
<component
|
|
13
|
+
:is="item.type === GROUP ? RenderFormGroup : RenderFormItem"
|
|
14
|
+
:ref="
|
|
15
|
+
(el) => {
|
|
16
|
+
customComponent[item.id] = el;
|
|
17
|
+
}
|
|
18
|
+
"
|
|
19
|
+
:data="item"
|
|
20
|
+
:value="value"
|
|
21
|
+
:item-value="value[item.id]"
|
|
22
|
+
:disabled="
|
|
23
|
+
disabled ||
|
|
24
|
+
(typeof item.disabled === 'function'
|
|
25
|
+
? item.disabled(value)
|
|
26
|
+
: item.disabled)
|
|
27
|
+
"
|
|
28
|
+
:readonly="readonly || item.readonly"
|
|
29
|
+
:options="options[item.id]"
|
|
30
|
+
@updateValue="updateValue"
|
|
31
|
+
/>
|
|
32
|
+
</template>
|
|
33
|
+
<slot />
|
|
34
|
+
</el-form>
|
|
30
35
|
</template>
|
|
31
36
|
|
|
32
37
|
<script setup>
|
|
38
|
+
// passive 是用于控制浏览器是否可以在滚动时取消事件的默认行为。当 passive 设置为 true 时，表示事件处理函数不会调用 preventDefault() 来阻止默认的滚动行为。
|
|
39
|
+
//在一些滚动事件处理中，如果事件处理函数中调用了 preventDefault()，浏览器会等待该函数执行完毕后再进行滚动，这可能导致滚动的延迟。通过将 passive 设置为 true，可以告诉浏览器事件处理函数不会调用 preventDefault()，从而使滚动更加流畅。
|
|
40
|
+
import "./util/ployfill";
|
|
33
41
|
import RenderFormGroup from "./components/render-form-group.vue";
|
|
34
42
|
import RenderFormItem from "./components/render-form-item.vue";
|
|
35
43
|
import {
|
|
@@ -260,7 +268,8 @@ const getComponentById = (id) => {
|
|
|
260
268
|
if (!itemContent.groupId) {
|
|
261
269
|
return customComponent.value[id].customComponent;
|
|
262
270
|
} else {
|
|
263
|
-
const componentRef =
|
|
271
|
+
const componentRef =
|
|
272
|
+
customComponent.value[itemContent.groupId].customComponent;
|
|
264
273
|
return componentRef[`formItem-${id}`].customComponent;
|
|
265
274
|
}
|
|
266
275
|
};
|
package/package.json
CHANGED