Yb-components
  • 组件
  • 数据录入
zougt
2022-01-27

YbRowsForm 多行表单

可增加、移除、上移、下移操作的多行展示的表单，通常作为yb-form或者el-form的一种表单控件

formItems[].rules[].validator 支持第六个参数：

rowsFormItems = [
    {
        label: '活动区域',
        prop: 'region',
        tooltip: '活动区域必填',
        rules: [
            {
                validator: (
                    rule,
                    value,
                    callback,
                    source,
                    options,
                    { prop, rowKey, parentProp, row }
                ) => {
                    callback();
                },
            },
        ],
        defaultValue: '99',
    },
];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 基本使用

在yb-form中使用

<template>
    <div>
        <yb-form
            ref="form"
            :formItems="formItems"
            :model="formModel"
            :spans="{xl:8,lg:12}"
            label-width="100px"
            @submit.native.prevent="onSubmit"
        >
            <template v-slot:name="formItem">
                <el-input
                    v-model="formModel[formItem.prop]"
                    clearable
                ></el-input>
            </template>
            <template v-slot:formRows="formItem">
                <yb-rows-form
                    :formItems="rowsFormItems"
                    v-model="formModel[formItem.prop]"
                    :spans="true"
                    clearable
                    buttonsInline
                >
                    <template
                        v-slot:formItems="{rowFormItem,rowFormModel,rowKey}"
                    >
                        {{consoleLOG(rowFormItem,rowFormModel,rowKey)}}
                        <el-input
                            v-model="rowFormModel[rowKey][rowFormItem.prop]"
                            clearable
                        ></el-input>
                    </template>
                </yb-rows-form>
            </template>

            <template v-slot:buttons="formItem">
                <el-button type="primary" native-type="submit"
                    >立即创建</el-button
                >
                <el-button>取消</el-button>
            </template>
        </yb-form>
    </div>
</template>
<script>
    export default {
        data() {
            const formItems = [
                {
                    label: '活动名称',
                    prop: 'name',
                    rules: [
                        {
                            required: true,
                            message: '请输入活动名称',
                            trigger: 'blur',
                        },
                        {
                            min: 3,
                            max: 5,
                            message: '长度在 3 到 5 个字符',
                            trigger: 'blur',
                        },
                    ],
                },
                {
                    label: '',
                    prop: 'formRows',
                    spans: { xl: 24, lg: 24, md: 24, sm: 24, xs: 24 },
                    labelWidth: '0px',
                    // inFormItem: false,
                    rules: [
                        {
                            type: 'array',
                            required: true,
                            message: '请至少选择一个活动性质',
                            trigger: 'change',
                        },
                    ],
                },

                {
                    label: '',
                    prop: 'buttons',
                },
            ];
            return {
                formItems,
                formModel: {
                    formRows: [{ delivery: '7777' }, {}],
                    name: null,
                },
                rowsFormItems: [
                    {
                        label: '活动区域',
                        prop: 'region',
                        tooltip: '活动区域必填',
                        rules: [
                            {
                                required: true,
                                message: '请选择活动区域',
                                trigger: 'change',
                            },
                        ],
                        defaultValue: '99',
                    },
                    {
                        label: '活动时间',
                        prop: 'datetime',
                        tooltip: ({ formItem, formModel, rowKey }) => {
                            return `当前活动时间：${
                                formModel[rowKey].datetime ?? '-'
                            }`;
                        },
                    },
                    {
                        label: '即时配送',
                        prop: 'delivery',
                    },
                    {
                        label: '特殊资源',
                        prop: 'resource',
                        rules: [
                            {
                                required: true,
                                message: '请选择活动资源',
                                trigger: 'change',
                            },
                        ],
                    },
                ],
            };
        },
        methods: {
            onSubmit() {
                console.log(this.formModel);
                this.$refs['form']
                    .getForm()
                    .validate()
                    .then(() => {
                        console.log('验证成功');
                    })
                    .catch((err) => {
                        console.log('验证失败', err);
                    });
            },
            consoleLOG(a, b, c) {
                // console.log(a, b, c);
            },
        },
    };
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
显示 复制

# 控件非联动显示/隐藏

与行内控件联动显示-隐藏不同的是，该功能用于控制所有行的字段

  • renderedController：根据每个字段设置是否渲染，默认渲染

    字段设置为 false：相当于渲染节点时 return null，若设置 rules ，不进行校验

  • showedController： 根据每个字段设置是否显示，默认显示

    字段设置为 false：相当于节点添加样式 display: none，若设置 rules ，进行校验

<template>
    <div>
        <div style="margin-bottom:20px">
            <el-button @click="toggleRegionRender">
                toggle 活动区域字段是否渲染
            </el-button>
            <el-button @click="toggleDatetimeShow">
                toggle 活动时间字段是否隐藏
            </el-button>
        </div>
        <yb-form
            ref="form"
            :formItems="formItems"
            :model="formModel"
            :spans="{xl:8,lg:12}"
            label-width="auto"
            @submit.native.prevent="onSubmit"
        >
            <template v-slot:name="formItem">
                <el-input
                    v-model="formModel[formItem.prop]"
                    clearable
                ></el-input>
            </template>
            <template v-slot:formRows="formItem">
                <yb-rows-form
                    :formItems="rowsFormItems"
                    v-model="formModel[formItem.prop]"
                    :spans="true"
                    clearable
                    :renderedController="renderedController"
                    :showedController="showedController"
                >
                    <template
                        v-slot:formItems="{rowFormItem,rowFormModel,rowKey}"
                    >
                        <el-input
                            v-model="rowFormModel[rowKey][rowFormItem.prop]"
                            clearable
                        ></el-input>
                    </template>
                </yb-rows-form>
            </template>

            <template v-slot:buttons="formItem">
                <el-button type="primary" native-type="submit"
                    >立即创建</el-button
                >
                <el-button>取消</el-button>
            </template>
        </yb-form>
    </div>
</template>
<script>
    export default {
        data() {
            const formItems = [
                {
                    label: '活动名称',
                    prop: 'name',
                    rules: [
                        {
                            required: true,
                            message: '请输入活动名称',
                            trigger: 'blur',
                        },
                        {
                            min: 3,
                            max: 5,
                            message: '长度在 3 到 5 个字符',
                            trigger: 'blur',
                        },
                    ],
                },
                {
                    label: '',
                    prop: 'formRows',
                    spans: { xl: 24, lg: 24, md: 24, sm: 24, xs: 24 },
                    labelWidth: '0px',
                    // inFormItem: false,
                    rules: [
                        {
                            type: 'array',
                            required: true,
                            message: '请至少选择一个活动性质',
                            trigger: 'change',
                        },
                    ],
                },

                {
                    label: '',
                    prop: 'buttons',
                },
            ];
            return {
                formItems,
                showedController: {
                    datetime: true,
                },
                renderedController: {
                    region: true,
                },
                formModel: {
                    formRows: [{ delivery: '7777' }, {}],
                    name: null,
                },
                rowsFormItems: [
                    {
                        label: '活动区域',
                        prop: 'region',
                        rules: [
                            {
                                required: true,
                                message: '请选择活动区域',
                                trigger: 'change',
                            },
                        ],
                        defaultValue: '99',
                    },
                    {
                        label: '活动时间',
                        prop: 'datetime',
                    },
                    {
                        label: '即时配送',
                        prop: 'delivery',
                    },
                    {
                        label: '特殊资源',
                        prop: 'resource',
                        rules: [
                            {
                                required: true,
                                message: '请选择活动资源',
                                trigger: 'change',
                            },
                        ],
                    },
                    {
                        label: '活动形式',
                        prop: 'desc',
                        rules: [
                            {
                                required: true,
                                message: '请填写活动形式',
                                trigger: 'blur',
                            },
                        ],
                    },
                ],
            };
        },
        methods: {
            onSubmit() {
                console.log(this.formModel);
                this.$refs['form']
                    .getForm()
                    .validate()
                    .then(() => {
                        console.log('验证成功');
                    })
                    .catch((err) => {
                        console.log('验证失败', err);
                    });
            },
            toggleRegionRender() {
                this.renderedController['region'] =
                    !this.renderedController.region;
            },
            toggleDatetimeShow() {
                this.showedController['datetime'] =
                    !this.showedController.datetime;
            },
        },
    };
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
显示 复制

# 行内控件联动显示/隐藏

<template>
    <yb-rows-form
        :formItems="rowsFormItems"
        v-model="rowsFormModel"
        :spans="true"
        :labelWidth="labelWidth"
        :rowFormItemRendered="rowFormItemRendered"
    >
        <template v-slot:formItems="{rowFormItem,rowFormModel,rowKey}">
            {{consoleLOG(rowFormItem,rowFormModel,rowKey)}}
            <el-input
                v-model="rowFormModel[rowKey][rowFormItem.prop]"
                clearable
            ></el-input>
        </template>
        <template v-slot:region="{rowFormItem,rowFormModel,rowKey}">
            <el-select
                v-model="rowFormModel[rowKey][rowFormItem.prop]"
                clearable
                placeholder=""
            >
                <el-option label="A" value="A"> </el-option>
                <el-option label="B" value="B"> </el-option>
            </el-select>
        </template>
    </yb-rows-form>
</template>
<script>
    export default {
        data() {
            return {
                labelWidth: '80px',
                rowsFormModel: [{ region: 'A' }, { region: 'B' }],
                rowsFormItems: [
                    {
                        label: '活动区域',
                        prop: 'region',
                        rules: [
                            {
                                required: true,
                                message: '请选择活动区域',
                                trigger: 'change',
                            },
                        ],
                    },
                    {
                        label: '活动时间',
                        prop: 'datetime',
                    },
                ],
            };
        },
        provide() {
            return {
                elForm: null,
            };
        },
        methods: {
            consoleLOG(a, b, c) {
                // console.log(a, b, c);
            },
            rowFormItemRendered({ rowKey, row, formItem }) {
                if (formItem.prop === 'datetime') {
                    //
                    return row['region'] !== 'A';
                }
                return true;
            },
        },
    };
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
显示 复制

# Props

参数 说明 类型 可选值 默认值
renderedController 控制不渲染字段，字段值不可被绑定，优先级比 rowFormItemRendered 高 。示例：{ desc: true }，则 desc 字段不渲染 object - {}
showedController 控制隐藏字段，字段值可以被绑定，相当于 display:none，优先级比 formItems[].show 高 。示例：{ desc: true }，则 desc 字段不显示 object - {}
formItems 生成多个el-form-Item (opens new window)的数据，每一项的属性对应el-form-Item (opens new window)的属性，每个控件通过对应的 item.prop 的作用域插槽来添加。 object[] - []
formItems[].excludeSpans 是否不包含在 spans boolean - false
formItems[].unrendered 是否不渲染(不建议再使用，可以用 renderedController 代替) boolean - false
formItems[].tooltip 配置提示信息 string | function({formItem,formModel,rowKey,rowIndex},h) => string - --
formItems[].contentTip 在控件下面配置提示信息 string | function({formItem,formModel,rowKey,rowIndex},h) => string - --
spans 用栅栏布局对 formItems 排版，如果是 object 类型，将与默认的{ xl: 4,lg: 6,md: 8,sm: 12, xs: 24}进行合并，总占格数为 24 boolean | object - false
rowFormItemRendered 控制行内的 formItem 是否渲染的函数，优先级比 formItems[].unrendered 高 function({rowKey,row,formItem}){return Boolean} - --
label-width 表单域标签的宽度。支持 auto ，默认继承 yb-form 的 label-width - - -
label-position 表单域标签的位,默认继承 yb-form 的 label-position - right/left/top -
showAddButton 是否显示新增按钮 - boolean |function({rows}){return boolean} true
showInsertButton 是否显示下插入一行按钮, 默认 null 会取showAddButton， 优先级比showAddButton高 - boolean|function({ row, rowKey,idScope,rowIndex}){ return true }|null null
showRemoveButton 是否显示移除按钮 - boolean|function({ row, rowKey,idScope,rowIndex}){ return true } true
showMoveButton 是否显示上移、下移按钮 - boolean|function({ row, rowKey,idScope,rowIndex}){ return true } true
showRowKey 是否显示操作按钮前的行标识，当 showRowKey、showRemoveButton、showMoveButton 都不显示时，操作区域也就不会显示 - boolean true
idScope 内部渲染将 rowKey 当作行的 dom 元素 id，如果一个页面存在多个 YbRowsForm，行 DOM 的 id 就不唯一，为了保证唯一 id，所以给 YbRowsForm 设置不同的 idScope，行 DOM 的 id 格式：idScope-rowKey - string --
removeRowFieldWhenDestroy 是否在行内控件销毁时清空对应的字段值 - boolean true
shardedRendering 是否分片渲染，表单项太多，一次性渲染会很明显的卡顿，开启后会进行异步一个表单项接着一个表单项的渲染 boolean - false
moveViewLabelKey 上移下移弹窗的下拉列表的选项显示名称来源，对应 formItems[].prop string - -

# Events

参数 说明 回调参数
change 绑定值改变时触发，比如添加行、移除行、上移行 value
rowFieldChange 行内字段值改变触发 {row,rowKey,fieldProp,idScope}
rowFieldBlur 行内字段失去焦点触发 {row,rowKey,fieldProp,idScope}
shardedRenderEnd 开启 shardedRendering 分片渲染后，最后渲染完成会触发的事件 -
上次更新: 2024/11/26, 19:21:17
YbForm 表单
YbCollapseForm 折叠表单

← YbCollapseForm 折叠表单→

Theme by Vdoing | Copyright © 2021-2025 YB-GZ | MIT License