Skip to content

Commit 42326c5

Browse files
Tobin1990Tobin1990
authored
select add transfer (#118)
* select add transfer * add select transfer demo
1 parent 6b8a9ab commit 42326c5

File tree

6 files changed

+330
-4
lines changed

6 files changed

+330
-4
lines changed

‎src/fields/fieldSelect.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@
4444
:disabled="field.disabled || false"
4545
:clearable="clearable"
4646
:size="size"
47+
:transfer="field.transfer || false"
4748
:placeholder="field.placeholder"
4849
:filterable="filterable || false"
4950
:loading="loading"

‎website/code/doc/select.js‎

Lines changed: 265 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ let simple = {};
33

44
const field = {
55
type: 'Select',
6+
transfer: true,
67
model: 'city',
78
options: [
89
{label: '北京', 'value': 'Beijing'},
@@ -387,7 +388,271 @@ export default {
387388
</template>
388389
`;
389390

391+
export const columns = [
392+
{
393+
title: '姓名',
394+
key: 'name',
395+
width: 100
396+
},
397+
{
398+
title: '年龄',
399+
key: 'age',
400+
width: 90
401+
},
402+
{
403+
title: '性别',
404+
key: 'gender',
405+
width: 90
406+
},
407+
{
408+
title: '出生日期',
409+
key: 'birthday',
410+
width: 150
411+
},
412+
{
413+
title: '省',
414+
slot: 'province',
415+
width: 230,
416+
poptip: {
417+
title: '编辑地址',
418+
displayField: {
419+
type: 'Select',
420+
api: '/selectApi',
421+
model: 'province',
422+
inline: true,
423+
cache: true,
424+
disabled: true,
425+
width: 100,
426+
size: 'small'
427+
},
428+
formFields: [
429+
{
430+
type: 'Select',
431+
api: '/selectApi',
432+
model: 'province',
433+
inline: true,
434+
cache: true,
435+
width: 100
436+
},
437+
{
438+
type: 'Button',
439+
text: '保存',
440+
subtype: 'primary',
441+
size: 'small',
442+
action: {
443+
type: 'ajax',
444+
api: '/curdEdit'
445+
},
446+
apiParams: ['name', 'province'],
447+
inline: true
448+
},
449+
]
450+
}
451+
},
452+
{
453+
title: '城市',
454+
slot: 'city',
455+
width: 230,
456+
formFields: [
457+
{
458+
type: 'Select',
459+
api: '/selectApi',
460+
transfer: true,
461+
model: 'city',
462+
inline: true,
463+
cache: true,
464+
width: 100
465+
},
466+
{
467+
type: 'Button',
468+
text: '保存',
469+
subtype: 'primary',
470+
size: 'small',
471+
action: {
472+
type: 'ajax',
473+
api: '/curdEdit'
474+
},
475+
apiParams: ['name', 'province', 'city'],
476+
inline: true
477+
},
478+
]
479+
},
480+
{
481+
title: '地址',
482+
slot: 'address',
483+
width: 200,
484+
poptip: {
485+
title: '编辑地址',
486+
formFields: [
487+
{
488+
type: 'Input',
489+
model: 'address',
490+
placeholder: '请输入地址',
491+
rules: [
492+
{
493+
type: 'string',
494+
required: true,
495+
}
496+
],
497+
width: 250,
498+
inline: true
499+
},
500+
{
501+
type: 'Button',
502+
text: '保存',
503+
subtype: 'primary',
504+
size: 'small',
505+
action: {
506+
type: 'ajax',
507+
api: '/curdEdit'
508+
},
509+
apiParams: ['name', 'address', 'test'],
510+
inline: true
511+
},
512+
]
513+
}
514+
},
515+
{
516+
title: '用户状态',
517+
width: 100,
518+
slot: 'status',
519+
formFields: [
520+
{
521+
type: 'Tag',
522+
model: 'status',
523+
options: [
524+
{
525+
name: '正常',
526+
value: '1',
527+
color: 'primary'
528+
},
529+
{
530+
name: '黑用户',
531+
value: '2',
532+
color: 'error'
533+
}
534+
]
535+
},
536+
]
537+
},
538+
{
539+
title: '操作',
540+
slot: 'action',
541+
width: 300,
542+
formFields: [
543+
{
544+
type: 'Button',
545+
text: '编辑',
546+
subtype: 'primary',
547+
size: 'small',
548+
action: {
549+
type: 'event',
550+
name: 'editDialog'
551+
},
552+
inline: true
553+
},
554+
{
555+
type: 'Button',
556+
text: '判黑',
557+
subtype: 'primary',
558+
size: 'small',
559+
confirmPoptip: {
560+
title: '确认判黑?',
561+
placement: 'left'
562+
},
563+
action: {
564+
type: 'ajax',
565+
api: '/curdToBlack'
566+
},
567+
apiParams: ['name', 'status'],
568+
inline: true,
569+
hiddenOn: {
570+
status: [
571+
{
572+
type: 'enum',
573+
enum: ['2']
574+
}
575+
]
576+
}
577+
},
578+
{
579+
type: 'Button',
580+
text: '洗白',
581+
subtype: 'primary',
582+
size: 'small',
583+
confirmPoptip: {
584+
title: '确定洗白?',
585+
placement: 'left'
586+
},
587+
action: {
588+
type: 'ajax',
589+
api: '/curdToWhite'
590+
},
591+
apiParams: ['name', 'status'],
592+
inline: true,
593+
hiddenOn: {
594+
status: [
595+
{
596+
type: 'enum',
597+
enum: ['1']
598+
}
599+
]
600+
}
601+
},
602+
{
603+
type: 'Button',
604+
text: '删除',
605+
subtype: 'error',
606+
size: 'small',
607+
confirmPoptip: {
608+
title: '确定删除?',
609+
placement: 'left'
610+
},
611+
action: {
612+
type: 'ajax',
613+
api: '/curdDelete'
614+
},
615+
apiParams: ['name'],
616+
inline: true
617+
},
618+
{
619+
type: 'Button',
620+
model: 'detailRoute',
621+
text: '详情',
622+
subtype: 'primary',
623+
size: 'small',
624+
action: {
625+
type: 'route'
626+
},
627+
apiParams: ['name'],
628+
inline: true
629+
},
630+
]
631+
}
632+
];
633+
634+
export const data = [
635+
{
636+
name: '王小明',
637+
age: 18,
638+
gender: '男',
639+
birthday: '1999-2-21',
640+
province: 'Beijing',
641+
city: 'Beijing',
642+
address: '北京市朝阳区芍药居',
643+
status: '1',
644+
detailRoute: {
645+
path: '/home',
646+
query: {
647+
name: '王小明',
648+
}
649+
}
650+
}
651+
];
652+
390653
export default {
654+
columns,
655+
data,
391656
simple,
392657
api,
393658
multiple,

‎website/page/development/request-interceptor/index.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@
4747
import iArticle from '../../../components/article';
4848
import inAnchor from '../../../components/anchor';
4949
import iCode from '../../../components/code';
50-
import Demo from '../../../components/Demo';
50+
import Demo from '../../../components/demo';
5151
import Code from '../../../code/development/requestInterceptor';
5252
import axios from 'axios';
5353

‎website/page/doc/Select/index.vue‎

Lines changed: 61 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,12 @@
3636
<td>String</td>
3737
<td>-</td>
3838
</tr>
39+
<tr>
40+
<td>transfer</td>
41+
<td>是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果</td>
42+
<td>Boolean</td>
43+
<td>false</td>
44+
</tr>
3945
<tr>
4046
<td>prefix</td>
4147
<td>在 Select 内部显示图标，传入<a href="https://www.iviewui.com/components/icon">icon</a>名称</td>
@@ -344,7 +350,59 @@
344350
</div>
345351
<i-code slot="code" lang="html">{{ code.prefix.code }}</i-code>
346352
</Demo>
347-
353+
<inAnchor title="代码示例 transfer" h2 />
354+
<Demo title="transfer" vertical>
355+
<div slot="demo">
356+
<Table class="curd-example-demo-table" :columns="code.columns" :data="code.data">
357+
<template
358+
v-for="column in code.columns"
359+
:slot="column.slot"
360+
slot-scope="{ row, index}"
361+
>
362+
<Form
363+
:key="column.slot"
364+
:model="JSON.parse(JSON.stringify(row))"
365+
>
366+
<Poptip
367+
v-if="column.poptip"
368+
:key="column.slot"
369+
placement="left-start"
370+
>
371+
<template v-if="column.poptip.displayField">
372+
<FieldGenerator
373+
:params-container="paramsContainer"
374+
:field="column.poptip.displayField"
375+
/>
376+
</template>
377+
<template v-else>
378+
<span>{{ row[column.slot] }}</span>
379+
</template>
380+
<Icon type="ios-create-outline" size="20" />
381+
<div slot="content">
382+
<FieldGenerator
383+
v-for="(field, i) in column.poptip.formFields"
384+
:key="i"
385+
:params-container="paramsContainer"
386+
:field="field"
387+
/>
388+
</div>
389+
</Poptip>
390+
<div v-if="column.formFields">
391+
<FieldGenerator
392+
v-for="(field, i) in column.formFields"
393+
:key="i"
394+
:field="field"
395+
@on-button-event="handleButtonEvent($event, row, index)"
396+
/>
397+
</div>
398+
</Form>
399+
</template>
400+
</Table>
401+
</div>
402+
<div slot="desc">
403+
<p>通过设置<code>field.transfer</code>是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果</p>
404+
</div>
405+
</Demo>
348406
</article>
349407
</i-article>
350408
</template>
@@ -355,7 +413,7 @@ import inAnchor from '../../../components/anchor';
355413
import iCode from '../../../components/code';
356414
import Demo from '../../../components/demo';
357415
import Code from '../../../code/doc/select';
358-
416+
// eslint-disable-next-line no-unused-vars
359417
export default {
360418
components: {
361419
iArticle,
@@ -365,6 +423,7 @@ export default {
365423
},
366424
data() {
367425
return {
426+
editModel: {},
368427
code: Code
369428
};
370429
},

‎website/page/examples/CURD-example/inlineEdit.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,7 @@ export const columns = [
7777
{
7878
type: 'Select',
7979
api: '/selectApi',
80+
transfer: true,
8081
model: 'city',
8182
inline: true,
8283
cache: true,

0 commit comments

Comments
 (0)