Yb-components
  • 组件
  • 数据录入
liaoyingmin
2023-10-11

YbRowsPopoverForm 浮层多行表单

yb-rows-form 多行填写表单占用位置多，量多了性能不好，yb-rows-popover-form 可以填写同样的数据表单而性能较好也省空间，不仅如此，多个列表之间可以互相拖动行数据，拖动调整顺序

与 yb-rows-form 不同的是，yb-rows-popover-form 表单部分使用 yb-formily 配置表单实现

# 基本用法

  • formItems[].formatter：结合 formItems[].showInTitle、formItems[].showInPopover 自定义行内显示的文本
  • formItems[].options：若存在 options 配置，组件会自行找对应的 label 显示，优先级低于 formatter
  • name
    姓名
    左对齐
  • age
    年龄
    左对齐
  • address
    家庭住址
    左对齐 
<template>
    <yb-codemirror-json
        v-model="jsonString"
        style="height:100px;margin-bottom:10px;"
    />
    <yb-rows-popover-form
        v-model="draggableList"
        :formItems="formItems"
        addable
        removable
        editable
        draggable
        size="mini"
        @change="onChange"
        fieldInfoWidth="60px"
    >
    </yb-rows-popover-form>
</template>
<script>
    const json = [
        {
            id: 1,
            fieldKey: 'name',
            fieldTitle: '姓名',
        },
        { id: 2, fieldKey: 'age', fieldTitle: '年龄' },
        { id: 3, fieldKey: 'address', fieldTitle: '家庭住址' },
    ];
    const alignMap = {
        left: '左对齐',
        center: '居中',
        right: '右对齐',
    };
    const alignOptions = Object.keys(alignMap).map((key) => ({
        value: key,
        label: alignMap[key],
    }));
    export default {
        data() {
            return {
                draggableList: json,
                jsonString: JSON.stringify(json),
                formItems: [
                    {
                        title: '字段键名',
                        field: 'fieldKey',
                        type: 'input',
                        showInTitle: true,
                        fieldInfoAlign: 'center',
                    },
                    {
                        title: '字段标题',
                        field: 'fieldTitle',
                        type: 'input',
                        value: '阿贝多',
                        showInPopover: true,
                        showOverflowTooltip: true,
                    },
                    {
                        title: '对齐方式',
                        field: 'fieldAlign',
                        type: 'radioButton',
                        value: 'left',
                        options: alignOptions,
                        showInPopover: true,
                        // formatter: (value, rowData, rowIndex) => {
                        //     return alignMap[value];
                        // },
                    },
                    {
                        title: '线在Y轴的值',
                        type: 'inputNumber',
                        field: 'herMarkLineVal',
                        props: {
                            // controlsPosition:'right'
                        },
                    },
                    {
                        title: '线颜色',
                        type: 'colorPicker',
                        field: 'herMarkLineColor',
                        value: '',
                    },
                    {
                        title: '线宽度',
                        type: 'slider',
                        value: 1,
                        field: 'herMarkLineWidth',
                        props: {
                            showInput: true,
                            showInputControls: true,
                            inputSize: 'mini',
                            min: 1,
                            max: 20,
                        },
                        // 不是表单的属性，用于渲染时是否等比缩放的标识
                        scaleInLayout: true,
                    },
                    {
                        title: '线类型',
                        type: 'select',
                        value: 'dashed',
                        field: 'herMarkLineType',
                        options: [
                            {
                                label: '实线',
                                value: 'solid',
                            },
                            {
                                label: '虚线',
                                value: 'dashed',
                            },
                            {
                                label: '点线',
                                value: 'dotted',
                            },
                        ],
                    },
                    {
                        title: '线类型',
                        type: 'checkbox',
                        value: 'dashed',
                        field: 'herMarkLineTypecheckbox',
                        options: [
                            {
                                label: '实线',
                                value: 'solid',
                            },
                            {
                                label: '虚线',
                                value: 'dashed',
                            },
                            {
                                label: '点线',
                                value: 'dotted',
                            },
                        ],
                    },
                    {
                        title: '线类型',
                        type: 'radio',
                        value: 'dashed',
                        field: 'herMarkLineTyperadio',
                        options: [
                            {
                                label: '实线',
                                value: 'solid',
                            },
                            {
                                label: '虚线',
                                value: 'dashed',
                            },
                            {
                                label: '点线',
                                value: 'dotted',
                            },
                        ],
                    },
                    {
                        title: '名称',
                        type: 'input',
                        field: 'herMarkLineName',
                        value: '',
                    },
                    {
                        title: '名称颜色',
                        type: 'colorPicker',
                        field: 'herMarkLineNameColor',
                        value: '',
                    },
                    {
                        title: '名称字体大小',
                        type: 'slider',
                        value: 12,
                        field: 'herMarkLineFontSize',
                        props: {
                            showInput: true,
                            showInputControls: false,
                            inputSize: 'mini',
                            min: 5,
                            max: 40,
                        },
                        // 不是表单的属性，用于渲染时是否等比缩放的标识
                        scaleInLayout: true,
                    },
                    {
                        title: '名称位置',
                        type: 'select',
                        field: 'herMarkLineNamePosition',
                        value: 'end',
                        options: [
                            {
                                label: '线的起始点',
                                value: 'start',
                            },
                            {
                                label: '线的中点',
                                value: 'middle',
                            },
                            {
                                label: '线的结束点',
                                value: 'end',
                            },
                        ],
                    },
                    {
                        title: '名称远离轴线',
                        type: 'slider',
                        value: 8,
                        field: 'herMarkLineNameMargin',
                        info: '标签与线之间的距离',
                        props: {
                            showInput: true,
                            showInputControls: false,
                            inputSize: 'mini',
                            min: -100,
                            max: 100,
                        },
                    },
                ],
            };
        },
        methods: {
            onChange(list) {
                this.jsonString = JSON.stringify(list);
            },
        },
    };
</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
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
显示 复制

# 作为 yb-form 的表单控件使用

后续也会集成到 yb-formily

<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-popover-form
                    v-model="formModel[formItem.prop]"
                    :formItems="rowsFormItems"
                    addable
                    removable
                    editable
                    draggable
                    size="mini"
                >
                </yb-rows-popover-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 },

                    // inFormItem: false,
                    rules: [
                        {
                            type: 'array',
                            required: true,
                            message: '请至少选择一个活动性质',
                            trigger: 'change',
                        },
                    ],
                },

                {
                    label: '',
                    prop: 'buttons',
                },
            ];
            const alignMap = {
                left: '左对齐',
                center: '居中',
                right: '右对齐',
            };
            const alignOptions = Object.keys(alignMap).map((key) => ({
                value: key,
                label: alignMap[key],
            }));
            return {
                formItems,
                formModel: {
                    formRows: [],
                    name: null,
                },
                rowsFormItems: [
                    {
                        title: '字段键名',
                        field: 'fieldKey',
                        type: 'input',
                        showInPopover: true,
                        validate: [
                            {
                                required: true,
                                message: '请输入名称',
                                trigger: 'blur',
                            },
                            {
                                trigger: 'change',
                                validator: (rule, value, callback) => {
                                    const formRows =
                                        this.formModel?.formRows || [];
                                    const repeated = formRows.filter(
                                        (item) => item.fieldKey === value
                                    );

                                    if (repeated.length > 1) {
                                        const repeatedNames = repeated
                                            .map((item) => item.fieldKey)
                                            .join('、');
                                        callback(new Error(`字段键名重复`));
                                    } else {
                                        callback();
                                    }
                                },
                            },
                        ],
                    },
                    {
                        title: '字段标题',
                        field: 'fieldTitle',
                        type: 'input',
                        value: '阿贝多',
                        showInTitle: true,
                    },
                    {
                        title: '对齐方式',
                        field: 'fieldAlign',
                        type: 'radioButton',
                        value: 'left',
                        options: alignOptions,
                        showInPopover: true,
                        formatter: (value, rowData, rowIndex) => {
                            return alignMap[value];
                        },
                    },
                ],
            };
        },
        methods: {
            onSubmit() {
                console.log(this.formModel);
                this.$refs['form']
                    .getForm()
                    .validate()
                    .then(() => {
                        console.log('验证成功');
                    })
                    .catch((err) => {
                        console.log('验证失败', err);
                    });
            },
        },
    };
</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
显示 复制

# 插槽使用

  • titleInfo：信息展示，不触发 popover，参数：{ rowData, rowIndex }
  • popoverInfo：信息展示，触发修改信息 popover 的元素，参数：{ rowData, rowIndex }
  • 其他插槽，与 yb-formily 插槽一致，比如扩展表单类型的插槽"type-"开头的
  • 姓名
    name
    0px
  • 年龄
    age
    0px
  • 性别
    gender
    0px 
<template>
    <yb-rows-popover-form
        v-model="draggableList"
        :formItems="formItems"
        addable
        removable
        editable
        draggable
    >
        <template v-slot:titleInfo="{ rowData }">
            <el-checkbox v-model="rowData.visible" />
            <el-divider direction="vertical" />
            {{ rowData.label }}
        </template>
        <template v-slot:popoverInfo="{ rowData }">
            {{ rowData.prop }}
            <el-divider direction="vertical" />
            {{ rowData.width || 0 }}px
        </template>
        <template v-slot:type-widthType="{ formModel, formItem }">
            <yb-inputgroup-wrapper rightValue="px">
                <el-input-number
                    v-model="formModel[formItem.prop]"
                    controls-position="right"
                    :min="0"
                    style="width: 100%"
                >
                </el-input-number>
            </yb-inputgroup-wrapper>
        </template>
    </yb-rows-popover-form>
</template>
<script>
    export default {
        data() {
            return {
                draggableList: [
                    { id: 1, prop: 'name', label: '姓名' },
                    { id: 2, prop: 'age', label: '年龄' },
                    { id: 3, prop: 'gender', label: '性别' },
                ],
                formItems: [
                    {
                        title: '字段键名',
                        field: 'prop',
                        type: 'input',
                        value: 'prop', // 默认值
                    },
                    {
                        title: '字段标题',
                        field: 'label',
                        type: 'input',
                        value: 'label', // 默认值
                    },
                    {
                        title: '是否显示',
                        field: 'visible',
                        type: 'switch',
                        props: {
                            activeValue: true,
                            inactiveValue: false,
                        },
                    },
                    {
                        title: '字段宽度',
                        field: 'width',
                        type: 'widthType',
                    },
                ],
            };
        },
    };
</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
显示 复制

# 拖拽分组

  • 当设置 dragGroup 为 object 类型
    • dragGroup.name：组名
    • dragGroup.pull：是否允许拖出当前组，可选值：true | false | 'clone' | array | function
      • true：允许所有列表拖出当前组
      • false：不允许任何列表拖出当前组
      • 'clone'：被拖出当前组时，克隆到其他组，当前组不会将该项数据移除
      • array：指定可拖出当前组的列表名
      • function：可动态判断是否可以拖出当前组，需返回布尔值
    • dragGroup.put：是否允许拖入当前组，可选值：true | false | array | function
      • true：允许所有列表拖入当前组
      • false：不允许任何列表拖入当前组
      • array：指定可拖入当前组的列表名
      • function：可动态判断是否可以拖入当前组，需返回布尔值
  • 当设置 dragGroup 为 string 类型
    • 相当于{ name: 设置值, pull: false, put: false }
列表1：允许所有列表拖入当前组，允许所有列表拖出当前组
  • 姓名
    name
  • 年龄
    age
列表2：允许列表1拖入当前组，当数据大于1行时可以拖出当前组
  • 性别
    gender
  • 电话
    phone
列表3：允许所有列表拖入当前组，拖出当前组复制数据
  • 身份证
    cardNo
  • 地址
    address 
<template>
    <yb-codemirror-json
        v-model="jsonString"
        style="height:100px;margin-bottom:10px;"
    />
    <div style="margin:10px 0">
        列表1：允许所有列表拖入当前组，允许所有列表拖出当前组
    </div>
    <yb-rows-popover-form
        v-model="data['draggableList1']"
        :formItems="formItems"
        draggable
        size="mini"
        @change="onChange"
        :dragGroup="dragGroup1"
    >
    </yb-rows-popover-form>
    <div style="margin:10px 0">
        列表2：允许列表1拖入当前组，当数据大于1行时可以拖出当前组
    </div>
    <yb-rows-popover-form
        v-model="data['draggableList2']"
        :formItems="formItems"
        draggable
        size="mini"
        @change="onChange"
        :dragGroup="dragGroup2"
    >
    </yb-rows-popover-form>
    <div style="margin:10px 0">
        列表3：允许所有列表拖入当前组，拖出当前组复制数据
    </div>
    <yb-rows-popover-form
        v-model="data['draggableList3']"
        :formItems="formItems"
        draggable
        size="mini"
        @change="onChange"
        :dragGroup="dragGroup3"
    >
    </yb-rows-popover-form>
</template>
<script>
    const json = {
        draggableList1: [
            { id: 1, fieldKey: 'name', fieldTitle: '姓名' },
            { id: 2, fieldKey: 'age', fieldTitle: '年龄' },
        ],
        draggableList2: [
            { id: 3, fieldKey: 'gender', fieldTitle: '性别' },
            { id: 4, fieldKey: 'phone', fieldTitle: '电话' },
        ],
        draggableList3: [
            { id: 4, fieldKey: 'cardNo', fieldTitle: '身份证' },
            { id: 5, fieldKey: 'address', fieldTitle: '地址' },
        ],
    };
    export default {
        data() {
            return {
                dragGroup1: {
                    name: 'yb-draggable-rows1',
                    pull: true,
                    put: true,
                },
                dragGroup2: {
                    name: 'yb-draggable-rows2',
                    pull: () => {
                        return this.data.draggableList2.length > 1;
                    },
                    put: ['yb-draggable-rows1', 'yb-draggable-rows2'],
                },
                dragGroup3: {
                    name: 'yb-draggable-rows3',
                    pull: 'clone',
                    put: true,
                },
                data: json,
                jsonString: JSON.stringify(json),
                list1ToList2: false,
                list2ToList1: false,
                formItems: [
                    {
                        title: '字段键名',
                        field: 'fieldKey',
                        type: 'input',
                        showInPopover: true,
                    },
                    {
                        title: '字段标题',
                        field: 'fieldTitle',
                        type: 'input',
                        value: '阿贝多',
                        showInTitle: true,
                    },
                ],
            };
        },
        methods: {
            onChange(list) {
                this.jsonString = JSON.stringify(this.data);
            },
        },
    };
</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
显示 复制

# YbRowsPopoverForm Attributes

参数 说明 类型 可选值 默认值
value/v-model 列表数据 array -- []
draggable 是否可拖动改变数据顺序 boolean -- true
editable 是否可编辑当前行数据 boolean -- true
removable 是否可删除当前行数据 boolean -- true
addable 是否可添加行数据 boolean -- true
showAddButton 是否在列表为空并且 addable:true 时显示添加按钮 boolean -- true
formItems 编辑表单项，详见yb-formily 的渲染数据结构-formaldata array -- []
formItems[].showInTitle 是否在不触发 popover 信息处展示，优先级低于插槽 titleInfo boolean -- --
formItems[].showInPopover 是否在触发 popover 信息处展示，优先级低于插槽 popoverInfo boolean -- --
formItems[].formatter 格式化展示信息内容，当 showInTitle 或者 showInPopover 开启生效，参数：value, rowData, rowIndex function -- --
formItems[].fieldInfoWidth 字段值宽度设置，不设置时默认内容自动撑开，优先级高 string -- --
formItems[].showOverflowTooltip 当内容过长被隐藏时显示 tooltip boolean -- --
rendered 当前行是否渲染，取决于函数返回的布尔值 function -- --
size 尺寸大小，'large' | 'medium' | 'small' | 'mini' string -- --
rowKey 定义每行数据的唯一标识字段 string -- "rowKey"
dragGroup 拖拽分组配置，详见拖拽分组 object|string -- { name: 'yb-draggable-rows', pull: true, put: ['yb-draggable-rows'] }
popoverWidth popover 宽度 string -- '250px'
popoverMaxHeight popover 最大高度，超出滚动 string -- '70vh'
fieldInfoWidth 字段值宽度设置，不设置时默认内容自动撑开 string -- --
idScope 内部渲染将 rowKey 当作行的 dom 元素 id，行 DOM 的 id 格式：idScope-rowKey - string --

# Events

参数 说明 回调参数
change 绑定值改变时触发，比如添加行、移除行、调整行的顺序 value
上次更新: 2024/06/21, 17:59:37
YbEditLayout 编辑页布局
YbFormily 配置式表单

← YbFormily 配置式表单→

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