基于element-ui封装可配置表单组件

news2024/7/6 18:00:56

在这里插入图片描述

“vue”: “^2.7.13”
“element-ui”: “^2.15.7”

代码地址

【说明】
该组件时使用vue3（vue2.7）语法封装，使用时可用vue2语法使用也可以使用vue3语法使用

一、vue2语法使用案例

基础用法

<template>
  <div class="form-demo">
    <div class="form">
      <BasicForm
        :schemas="schemas"
        :colProps="{span: 12}"
        :showActionButtonGroup="false"
        @register="register"
        @change="handleChange"
      />
    </div>
    <div class="btns">
      <el-button type="primary" @click="saveForm">保存</el-button>
      <el-button @click="resetForm">重置</el-button>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'BasicFormDemo',
    data() {
      return {
        schemas: [
          {
            prop: 'id',
            component: 'Input',
            show: false // 显示隐藏
          },
          {
            prop: 'username',
            component: 'Input',
            label: '姓名',
            labelWidth: '100px',
            defaultValue: '张三', // 默认值
            colProps: {
              span: 8
            },
            required: true
          },
          {
            prop: 'address',
            component: 'Input',
            label: '地址',
            labelWidth: '100px',
            defaultValue: 1, // 默认值
            componentProps: {
              maxlength: 10,
              showWordLimit: true
            },
            colProps: {
              span: 8
            }
          },
          {
            prop: 'rate',
            component: 'Input',
            label: '税率',
            labelWidth: '100px',
            componentProps: {
              append: '%'
            },
            colProps: {
              span: 8
            }
          },
          {
            prop: 'url',
            component: 'Input',
            label: '网址',
            labelWidth: '100px',
            componentProps: {
              prepend: 'http'
            },
            colProps: {
              span: 8
            }
          },
          {
            prop: 'inputNumber',
            component: 'InputNumber',
            label: '距离',
            labelWidth: '100px',
            defaultValue: 1 // 默认值
          },
          {
            prop: 'age',
            component: 'Switch',
            label: '年龄',
            labelWidth: '100px',
            defaultValue: true // 默认值
          },
          {
            prop: 'remark',
            component: 'Input',
            label: '评论',
            labelWidth: '100px',
            componentProps: {
              type: 'textarea',
              placeholder: '请输入评论'
            }
          },
          {
            prop: 'divider',
            component: 'Divider',
            labelWidth: '0px',
            componentProps: {
              contentPosition: 'left',
              content: '日期类型组件'
            }
          },
          {
            prop: 'time1',
            component: 'TimePicker',
            label: '时间选择器'
          },
          {
            prop: 'time2',
            component: 'TimePicker',
            label: '时间选择器',
            componentProps: {
              isRange: true,
              rangeSeparator: '至',
              startPlaceholder: '开始时间',
              endPlaceholder: '结束时间',
              placeholder: '选择时间范围'
            }
          },
          {
            prop: 'createDate',
            component: 'DatePicker',
            label: '创建日期',
            componentProps: {}
          },
          {
            prop: 'endDate',
            component: 'DatePicker',
            label: '带快捷选项',
            componentProps: {
              valueFormat: 'yyyy-MM-dd',
              pickerOptions: {
                disabledDate(time) {
                  return time.getTime() > Date.now()
                },
                shortcuts: [
                  {
                    text: '今天',
                    onClick(picker) {
                      picker.$emit('pick', new Date())
                    }
                  },
                  {
                    text: '昨天',
                    onClick(picker) {
                      const date = new Date()
                      date.setTime(date.getTime() - 3600 * 1000 * 24)
                      picker.$emit('pick', date)
                    }
                  },
                  {
                    text: '一周前',
                    onClick(picker) {
                      const date = new Date()
                      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
                      picker.$emit('pick', date)
                    }
                  }
                ]
              }
            }
          },
          {
            prop: 'weekly',
            component: 'DatePicker',
            label: '周',
            componentProps: {
              type: 'week',
              format: 'yyyy 第 WW 周',
              placeholder: '请选择周'
            }
          },
          {
            prop: 'dateRange',
            component: 'DatePicker',
            label: '日期范围',
            componentProps: {
              type: 'daterange',
              rangeSeparator: '至',
              startPlaceholder: '开始日期',
              endPlaceholder: '结束日期'
            }
          },
          {
            prop: 'dateRange1',
            component: 'DatePicker',
            label: '日期范围-带快捷选项',
            labelWidth: '140px',
            componentProps: {
              type: 'daterange',
              align: 'right',
              unlinkPanels: true,
              rangeSeparator: '至',
              startPlaceholder: '开始日期',
              endPlaceholder: '结束日期',
              pickerOptions: {
                shortcuts: [
                  {
                    text: '最近一周',
                    onClick(picker) {
                      const end = new Date()
                      const start = new Date()
                      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                      picker.$emit('pick', [start, end])
                    }
                  },
                  {
                    text: '最近一个月',
                    onClick(picker) {
                      const end = new Date()
                      const start = new Date()
                      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                      picker.$emit('pick', [start, end])
                    }
                  },
                  {
                    text: '最近三个月',
                    onClick(picker) {
                      const end = new Date()
                      const start = new Date()
                      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                      picker.$emit('pick', [start, end])
                    }
                  }
                ]
              }
            }
          },
          {
            prop: 'monthRange',
            component: 'DatePicker',
            label: '月份范围',
            componentProps: {
              type: 'monthrange',
              rangeSeparator: '至',
              startPlaceholder: '开始月份',
              endPlaceholder: '结束月份'
            }
          },
          {
            prop: 'monthRange1',
            component: 'DatePicker',
            label: '月份范围-带选项',
            labelWidth: '130px',
            componentProps: {
              type: 'monthrange',
              align: 'right',
              unlinkPanels: true,
              rangeSeparator: '至',
              startPlaceholder: '开始月份',
              endPlaceholder: '结束月份',
              pickerOptions: {
                shortcuts: [
                  {
                    text: '本月',
                    onClick(picker) {
                      picker.$emit('pick', [new Date(), new Date()])
                    }
                  },
                  {
                    text: '今年至今',
                    onClick(picker) {
                      const end = new Date()
                      const start = new Date(new Date().getFullYear(), 0)
                      picker.$emit('pick', [start, end])
                    }
                  },
                  {
                    text: '最近六个月',
                    onClick(picker) {
                      const end = new Date()
                      const start = new Date()
                      start.setMonth(start.getMonth() - 6)
                      picker.$emit('pick', [start, end])
                    }
                  }
                ]
              }
            }
          },
          {
            prop: 'DateTimePicker',
            component: 'DatePicker',
            label: '日期时间选择器',
            labelWidth: '110px',
            componentProps: {
              type: 'datetime'
            }
          },
          {
            prop: 'divider',
            component: 'Divider',
            labelWidth: '0px',
            componentProps: {
              contentPosition: 'left',
              content: '单选框'
            }
          },
          {
            prop: 'radio',
            component: 'RadioGroup',
            label: '单选框',
            defaultValue: '2',
            colProps: { span: 12 },
            componentProps: {
              options: [
                {
                  label: '1',
                  value: '选项1'
                },
                {
                  label: '2',
                  value: '选项2'
                },
                {
                  label: '3',
                  value: '选项3',
                  border: true
                },
                {
                  label: '4',
                  value: '选项4',
                  disabled: true
                }
              ]
            }
          },
          {
            prop: 'divider',
            component: 'Divider',
            labelWidth: '0px',
            componentProps: {
              contentPosition: 'left',
              content: '复选框'
            }
          },
          {
            prop: 'checkbox',
            component: 'CheckboxGroup',
            label: '复选框',
            defaultValue: ['2'],
            colProps: { span: 12 },
            componentProps: {
              options: [
                {
                  label: '1',
                  value: '选项1'
                },
                {
                  label: '2',
                  value: '选项2'
                },
                {
                  label: '3',
                  value: '选项3',
                  border: true
                },
                {
                  label: '4',
                  value: '选项4',
                  disabled: true
                }
              ]
            }
          },
          {
            prop: 'selectAll',
            component: 'SelectAll',
            label: '全选',
            colProps: { span: 12 },
            defaultValue: ['2'],
            componentProps: {
              options: [
                {
                  label: '1',
                  value: '选项1'
                },
                {
                  label: '2',
                  value: '选项2'
                }
              ]
            }
          },
          {
            prop: 'divider',
            component: 'Divider',
            labelWidth: '0px',
            componentProps: {
              contentPosition: 'left',
              content: '下拉框'
            }
          },
          {
            prop: 'select',
            component: 'Select',
            label: '下拉框',
            defaultValue: '2',
            componentProps: {
              options: [
                {
                  label: '选项1',
                  value: '1'
                },
                {
                  label: '选项2',
                  value: '2',
                  disabled: true
                }
              ]
            }
          },
          {
            prop: 'select1',
            component: 'Select',
            label: '多选',
            componentProps: {
              multiple: true,
              placeholder: '请选择',
              options: [
                {
                  unitName: '选项1',
                  id: '1'
                },
                {
                  unitName: '选项2',
                  id: '2',
                  disabled: true
                }
              ],
              fieldNames: {
                label: 'unitName',
                value: 'id'
              }
            }
          },
          {
            prop: 'select11',
            component: 'ApiSelect',
            label: '远程下拉框',
            componentProps: {
              api: () => this.getOpt(),
              resultField: 'result',
              fieldNames: {
                label: 'unitName',
                value: 'id'
              }
            }
          },
          {
            prop: 'ApiTreeSelect',
            component: 'ApiTreeSelect',
            label: '树下拉框',
            componentProps: {
              api: () => this.getTreeData(),
              resultField: 'result',
              fieldNames: {
                label: 'name'
              }
            }
          },

          {
            prop: 'divider1',
            component: 'Divider',
            labelWidth: '0px',
            componentProps: {
              contentPosition: 'left',
              content: '级联选择器'
            }
          },
          {
            prop: 'Cascader',
            component: 'Cascader',
            label: '基本用法',
            componentProps: {
              options: [
                {
                  value: 'zhinan',
                  label: '指南',
                  children: [
                    {
                      value: 'shejiyuanze',
                      label: '设计原则',
                      children: [
                        {
                          value: 'yizhi',
                          label: '一致'
                        },
                        {
                          value: 'fankui',
                          label: '反馈'
                        },
                        {
                          value: 'xiaolv',
                          label: '效率'
                        },
                        {
                          value: 'kekong',
                          label: '可控'
                        }
                      ]
                    },
                    {
                      value: 'daohang',
                      label: '导航',
                      children: [
                        {
                          value: 'cexiangdaohang',
                          label: '侧向导航'
                        },
                        {
                          value: 'dingbudaohang',
                          label: '顶部导航'
                        }
                      ]
                    }
                  ]
                },
                {
                  value: 'zujian',
                  label: '组件',
                  children: [
                    {
                      value: 'basic',
                      label: 'Basic',
                      children: [
                        {
                          value: 'layout',
                          label: 'Layout 布局'
                        },
                        {
                          value: 'color',
                          label: 'Color 色彩'
                        },
                        {
                          value: 'typography',
                          label: 'Typography 字体'
                        },
                        {
                          value: 'icon',
                          label: 'Icon 图标'
                        },
                        {
                          value: 'button',
                          label: 'Button 按钮'
                        }
                      ]
                    },
                    {
                      value: 'form',
                      label: 'Form',
                      children: [
                        {
                          value: 'radio',
                          label: 'Radio 单选框'
                        },
                        {
                          value: 'checkbox',
                          label: 'Checkbox 多选框'
                        },
                        {
                          value: 'input',
                          label: 'Input 输入框'
                        },
                        {
                          value: 'input-number',
                          label: 'InputNumber 计数器'
                        },
                        {
                          value: 'select',
                          label: 'Select 选择器'
                        },
                        {
                          value: 'cascader',
                          label: 'Cascader 级联选择器'
                        },
                        {
                          value: 'switch',
                          label: 'Switch 开关'
                        },
                        {
                          value: 'slider',
                          label: 'Slider 滑块'
                        },
                        {
                          value: 'time-picker',
                          label: 'TimePicker 时间选择器'
                        },
                        {
                          value: 'date-picker',
                          label: 'DatePicker 日期选择器'
                        },
                        {
                          value: 'datetime-picker',
                          label: 'DateTimePicker 日期时间选择器'
                        },
                        {
                          value: 'upload',
                          label: 'Upload 上传'
                        },
                        {
                          value: 'rate',
                          label: 'Rate 评分'
                        },
                        {
                          value: 'form',
                          label: 'Form 表单'
                        }
                      ]
                    },
                    {
                      value: 'data',
                      label: 'Data',
                      children: [
                        {
                          value: 'table',
                          label: 'Table 表格'
                        },
                        {
                          value: 'tag',
                          label: 'Tag 标签'
                        },
                        {
                          value: 'progress',
                          label: 'Progress 进度条'
                        },
                        {
                          value: 'tree',
                          label: 'Tree 树形控件'
                        },
                        {
                          value: 'pagination',
                          label: 'Pagination 分页'
                        },
                        {
                          value: 'badge',
                          label: 'Badge 标记'
                        }
                      ]
                    },
                    {
                      value: 'notice',
                      label: 'Notice',
                      children: [
                        {
                          value: 'alert',
                          label: 'Alert 警告'
                        },
                        {
                          value: 'loading',
                          label: 'Loading 加载'
                        },
                        {
                          value: 'message',
                          label: 'Message 消息提示'
                        },
                        {
                          value: 'message-box',
                          label: 'MessageBox 弹框'
                        },
                        {
                          value: 'notification',
                          label: 'Notification 通知'
                        }
                      ]
                    },
                    {
                      value: 'navigation',
                      label: 'Navigation',
                      children: [
                        {
                          value: 'menu',
                          label: 'NavMenu 导航菜单'
                        },
                        {
                          value: 'tabs',
                          label: 'Tabs 标签页'
                        },
                        {
                          value: 'breadcrumb',
                          label: 'Breadcrumb 面包屑'
                        },
                        {
                          value: 'dropdown',
                          label: 'Dropdown 下拉菜单'
                        },
                        {
                          value: 'steps',
                          label: 'Steps 步骤条'
                        }
                      ]
                    },
                    {
                      value: 'others',
                      label: 'Others',
                      children: [
                        {
                          value: 'dialog',
                          label: 'Dialog 对话框'
                        },
                        {
                          value: 'tooltip',
                          label: 'Tooltip 文字提示'
                        },
                        {
                          value: 'popover',
                          label: 'Popover 弹出框'
                        },
                        {
                          value: 'card',
                          label: 'Card 卡片'
                        },
                        {
                          value: 'carousel',
                          label: 'Carousel 走马灯'
                        },
                        {
                          value: 'collapse',
                          label: 'Collapse 折叠面板'
                        }
                      ]
                    }
                  ]
                },
                {
                  value: 'ziyuan',
                  label: '资源',
                  children: [
                    {
                      value: 'axure',
                      label: 'Axure Components'
                    },
                    {
                      value: 'sketch',
                      label: 'Sketch Templates'
                    },
                    {
                      value: 'jiaohu',
                      label: '组件交互文档'
                    }
                  ]
                }
              ]
            }
          },
          {
            prop: 'Cascader2',
            component: 'Cascader',
            label: '多选',
            componentProps: {
              props: { multiple: true },
              options: [
                {
                  value: 'zhinan',
                  label: '指南',
                  children: [
                    {
                      value: 'shejiyuanze',
                      label: '设计原则',
                      children: [
                        {
                          value: 'yizhi',
                          label: '一致'
                        },
                        {
                          value: 'fankui',
                          label: '反馈'
                        },
                        {
                          value: 'xiaolv',
                          label: '效率'
                        },
                        {
                          value: 'kekong',
                          label: '可控'
                        }
                      ]
                    },
                    {
                      value: 'daohang',
                      label: '导航',
                      children: [
                        {
                          value: 'cexiangdaohang',
                          label: '侧向导航'
                        },
                        {
                          value: 'dingbudaohang',
                          label: '顶部导航'
                        }
                      ]
                    }
                  ]
                },
                {
                  value: 'zujian',
                  label: '组件',
                  children: [
                    {
                      value: 'basic',
                      label: 'Basic',
                      children: [
                        {
                          value: 'layout',
                          label: 'Layout 布局'
                        },
                        {
                          value: 'color',
                          label: 'Color 色彩'
                        },
                        {
                          value: 'typography',
                          label: 'Typography 字体'
                        },
                        {
                          value: 'icon',
                          label: 'Icon 图标'
                        },
                        {
                          value: 'button',
                          label: 'Button 按钮'
                        }
                      ]
                    },
                    {
                      value: 'form',
                      label: 'Form',
                      children: [
                        {
                          value: 'radio',
                          label: 'Radio 单选框'
                        },
                        {
                          value: 'checkbox',
                          label: 'Checkbox 多选框'
                        },
                        {
                          value: 'input',
                          label: 'Input 输入框'
                        },
                        {
                          value: 'input-number',
                          label: 'InputNumber 计数器'
                        },
                        {
                          value: 'select',
                          label: 'Select 选择器'
                        },
                        {
                          value: 'cascader',
                          label: 'Cascader 级联选择器'
                        },
                        {
                          value: 'switch',
                          label: 'Switch 开关'
                        },
                        {
                          value: 'slider',
                          label: 'Slider 滑块'
                        },
                        {
                          value: 'time-picker',
                          label: 'TimePicker 时间选择器'
                        },
                        {
                          value: 'date-picker',
                          label: 'DatePicker 日期选择器'
                        },
                        {
                          value: 'datetime-picker',
                          label: 'DateTimePicker 日期时间选择器'
                        },
                        {
                          value: 'upload',
                          label: 'Upload 上传'
                        },
                        {
                          value: 'rate',
                          label: 'Rate 评分'
                        },
                        {
                          value: 'form',
                          label: 'Form 表单'
                        }
                      ]
                    },
                    {
                      value: 'data',
                      label: 'Data',
                      children: [
                        {
                          value: 'table',
                          label: 'Table 表格'
                        },
                        {
                          value: 'tag',
                          label: 'Tag 标签'
                        },
                        {
                          value: 'progress',
                          label: 'Progress 进度条'
                        },
                        {
                          value: 'tree',
                          label: 'Tree 树形控件'
                        },
                        {
                          value: 'pagination',
                          label: 'Pagination 分页'
                        },
                        {
                          value: 'badge',
                          label: 'Badge 标记'
                        }
                      ]
                    },
                    {
                      value: 'notice',
                      label: 'Notice',
                      children: [
                        {
                          value: 'alert',
                          label: 'Alert 警告'
                        },
                        {
                          value: 'loading',
                          label: 'Loading 加载'
                        },
                        {
                          value: 'message',
                          label: 'Message 消息提示'
                        },
                        {
                          value: 'message-box',
                          label: 'MessageBox 弹框'
                        },
                        {
                          value: 'notification',
                          label: 'Notification 通知'
                        }
                      ]
                    },
                    {
                      value: 'navigation',
                      label: 'Navigation',
                      children: [
                        {
                          value: 'menu',
                          label: 'NavMenu 导航菜单'
                        },
                        {
                          value: 'tabs',
                          label: 'Tabs 标签页'
                        },
                        {
                          value: 'breadcrumb',
                          label: 'Breadcrumb 面包屑'
                        },
                        {
                          value: 'dropdown',
                          label: 'Dropdown 下拉菜单'
                        },
                        {
                          value: 'steps',
                          label: 'Steps 步骤条'
                        }
                      ]
                    },
                    {
                      value: 'others',
                      label: 'Others',
                      children: [
                        {
                          value: 'dialog',
                          label: 'Dialog 对话框'
                        },
                        {
                          value: 'tooltip',
                          label: 'Tooltip 文字提示'
                        },
                        {
                          value: 'popover',
                          label: 'Popover 弹出框'
                        },
                        {
                          value: 'card',
                          label: 'Card 卡片'
                        },
                        {
                          value: 'carousel',
                          label: 'Carousel 走马灯'
                        },
                        {
                          value: 'collapse',
                          label: 'Collapse 折叠面板'
                        }
                      ]
                    }
                  ]
                },
                {
                  value: 'ziyuan',
                  label: '资源',
                  children: [
                    {
                      value: 'axure',
                      label: 'Axure Components'
                    },
                    {
                      value: 'sketch',
                      label: 'Sketch Templates'
                    },
                    {
                      value: 'jiaohu',
                      label: '组件交互文档'
                    }
                  ]
                }
              ]
            }
          },
          {
            prop: 'field3',
            component: 'Cascader',
            label: '可搜索',
            componentProps: {
              filterable: true,
              props: { label: 'unitName', value: 'id' },
              options: [
                {
                  unitName: '神印王座',
                  id: 1,
                  children: [
                    {
                      unitName: '龙皓晨',
                      id: 11
                    },
                    {
                      unitName: '圣彩儿',
                      id: 12
                    }
                  ]
                },
                {
                  unitName: '吞噬星空',
                  id: 2
                },
                {
                  unitName: '天行九歌',
                  id: 3
                }
              ]
            }
          },
          {
            prop: 'field3',
            component: 'ApiCascader',
            label: 'ApiCascader',
            componentProps: {
              filterable: true,
              props: { label: 'unitName', value: 'id' },
              api: () => this.getCascaderOpt()
            }
          },
          {
            prop: 'field4',
            component: 'Divider',
            labelWidth: '0px',
            componentProps: {
              contentPosition: 'left',
              content: '上传'
            }
          },
          {
            prop: 'field4',
            component: 'Upload',
            label: '上传附件',
            componentProps: {
              action: 'https://httpbin.org/post'
            }
          }
        ],
        formAction: {}
      }
    },
    methods: {
      register(e) {
        this.formAction = e
        console.log('e', e)
      },
      handleChange(e) {
        console.log('handleChange', e)
      },
      saveForm() {
        this.formAction.validate()
        console.log('t', this.formAction.getFieldValues())
      },
      resetForm() {
        this.formAction.clearValidate()
      },
      getOpt() {
        return new Promise(resolve => {
          const result = {
            result: [
              {
                id: '选项1',
                unitName: '黄金糕'
              },
              {
                id: '选项2',
                unitName: '双皮奶'
              },
              {
                id: '选项3',
                unitName: '蚵仔煎'
              },
              {
                id: '选项4',
                unitName: '龙须面'
              },
              {
                id: '选项5',
                unitName: '北京烤鸭'
              },
              {
                id: '选项6',
                unitName: '冰激淋'
              },
              {
                id: '7',
                unitName: '榴莲千层'
              },
              {
                id: '8',
                unitName: '煎饼'
              },
              {
                id: '9',
                unitName: '手抓饼'
              }
            ]
          }
          resolve(result)
        })
      },
      getTreeData() {
        return Promise.resolve([
          {
            id: 118808,
            parentId: null,
            name: '新疆',
            children: [
              {
                id: 118809,
                parentId: 118808,
                name: '巴州乐禾',
                children: [
                  {
                    id: 118817,
                    parentId: 118809,
                    name: '采购部'
                  },
                  {
                    id: 118818,
                    parentId: 118809,
                    name: '销售部'
                  },
                  {
                    id: 118824,
                    parentId: 118809,
                    name: '运营部'
                  },
                  {
                    id: 111824,
                    parentId: 113809,
                    name: '研发部'
                  },
                  {
                    id: 118814,
                    parentId: 118829,
                    name: '市场部'
                  }
                ]
              }
            ]
          },
          {
            id: 118809,
            parentId: null,
            name: '广东',
            children: [
              {
                id: 118879,
                parentId: 118801,
                name: '广州'
              }
            ]
          }
        ])
      },
      getCascaderOpt() {
        return Promise.resolve([
          {
            unitName: '神印王座',
            id: 1,
            children: [
              {
                unitName: '龙皓晨',
                id: 11
              },
              {
                unitName: '圣彩儿',
                id: 12
              }
            ]
          },
          {
            unitName: '吞噬星空',
            id: 2
          },
          {
            unitName: '天行九歌',
            id: 3
          }
        ])
      }
    }
  }
</script>
<style lang="scss">
  .form-demo {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background-color: white;

    .form {
      flex: 1;
      overflow: hidden;
    }

    .btns {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding: 16px;
      box-shadow: 0 -1px #ddd;
    }
  }
</style>

可折叠表单

<template>
  <div class="form-demo">
    <div class="form">
      <BasicForm
        :schemas="schemas"
        :colProps="{span: 12}"
        @register="register"
        @change="handleChange"
      />
    </div>
  </div>
</template>

<script>
  export default {
    name: 'BasicFormDemo',
    data() {
      return {
        schemas: [
          {
            prop: 'username',
            component: 'Input',
            label: '姓名'
          },
          {
            prop: 'address',
            component: 'Input',
            label: '地址'
          },
          {
            prop: 'rate',
            component: 'Input',
            label: '税率',
            componentProps: {
              append: '%'
            }
          }
        ],
        formAction: {}
      }
    },
    methods: {
      register(e) {
        this.formAction = e
        console.log('formAction', e)
      },
      handleChange(e) {
        console.log('handleChange', e)
      }
    }
  }
</script>
<style lang="scss">
  .form-demo {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background-color: white;

    .form {
      flex: 1;
      overflow: hidden;
    }

    .btns {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding: 16px;
      box-shadow: 0 -1px #ddd;
    }
  }
</style>

设置表单表项值

<template>
  <div class="form-demo">
    <div class="form">
      <BasicForm
        :schemas="schemas"
        :colProps="{span: 12}"
        :showActionButtonGroup="false"
        @register="register"
        @change="handleChange"
      />
    </div>
    <div class="btns">
      <el-button type="primary" @click="setFormData">设置值</el-button>
      <el-button type="primary" @click="updateSchema">
        更新表单项配置项
      </el-button>
      <el-button type="primary" @click="insetSchema">
        插入表单项
      </el-button>
      <el-button type="primary" @click="removeSchemaByFiled">
        删除表单项
      </el-button>
      <el-button type="primary" @click="resetSchemas">
        重置表单
      </el-button>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'BasicFormDemo',
    data() {
      return {
        schemas: [
          {
            prop: 'username',
            component: 'Input',
            label: '姓名'
          },
          {
            prop: 'address',
            component: 'Input',
            label: '地址'
          },
          {
            prop: 'rate',
            component: 'Input',
            label: '税率',
            componentProps: {
              append: '%'
            }
          }
        ],
        formAction: {}
      }
    },
    methods: {
      register(e) {
        this.formAction = e
        console.log('formAction', e)
      },
      handleChange(e) {
        console.log('handleChange', e)
      },
      setFormData() {
        // 调用 setFieldValues 方法可设置表单项值, 返回值是更新之后表单的值
        const data = this.formAction.setFieldValues({ username: '李四' })
        console.log('data', data)
      },
      updateSchema() {
        this.formAction.updateSchema({
          prop: 'rate',
          component: 'Input',
          label: '税率',
          componentProps: {
            placeholder: '请输入税率'
          }
        })
      },
      insetSchema() {
        this.formAction.insetSchema('rate', {
          prop: 'rate1',
          component: 'Input',
          label: '新增',
          componentProps: {
            placeholder: '请输入'
          }
        })
      },
      removeSchemaByFiled() {
        this.formAction.removeSchemaByFiled('address')
      },
      resetSchemas() {
        this.formAction.resetSchemas()
      }
    }
  }
</script>
<style lang="scss">
  .form-demo {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background-color: white;

    .form {
      flex: 1;
      overflow: hidden;
    }

    .btns {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding: 16px;
      box-shadow: 0 -1px #ddd;
    }
  }
</style>

使用插槽 slots

<template>
  <div class="form-demo">
    <div class="form">
      <BasicForm :schemas="schemas" :colProps="{span: 24}">
        <template #username>
          <span>username slot</span>
        </template>
        <template #submitBefore>
          submit 左侧插槽
        </template>
      </BasicForm>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'BasicFormDemo',
    data() {
      return {
        schemas: [
          {
            prop: 'username',
            component: 'Input',
            label: '姓名',
            slots: 'username'
          },
          {
            prop: 'address',
            component: 'Input',
            label: '地址'
          },
          {
            prop: 'rate',
            component: 'Input',
            label: '税率',
            componentProps: {
              append: '%'
            }
          }
        ]
      }
    }
  }
</script>
<style lang="scss">
  .form-demo {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background-color: white;

    .form {
      flex: 1;
      overflow: hidden;
    }

    .btns {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding: 16px;
      box-shadow: 0 -1px #ddd;
    }
  }
</style>

二、vue3语法使用

<template>
	<BasicForm
        @register="register"
        @submit="handleSubmit"
        @reset="handleSubmit"
        @change="handleChange"
      />
</template>

<script setup>
const [register, { updateSchema, getFieldValues, setFieldValues }] = useForm({
  schemas: [
	  {
	    prop: 'orgUnitId',
	    component: 'ApiSelect',
	    label: 'label1',
	    componentProps: {
	      api: $api.getOrgUnitByUserId,
	      fieldNames: { label: 'departmentName', value: 'id' },
	      resultField: 'result'
	    },
	    required: true
	  },
	  {
	    prop: 'projectId',
	    component: 'Select',
	    label: 'label2',
	    required: true
	  },
  ],
  labelWidth: '110px'
})
</script>

Form Attributes

参数说明类型可选值默认值
colonlabel 是否显示冒号boolean—显示
schemas必填，表单配置项，具体 看下表array——
colProps表单项栅格布局，具体看下表objeact——
labelWidthlabel 宽度string—‘100px’
labelPosition表单域标签的位置，如果值为 left 或者 right 时，则需要设置 label-widthstring—right
showActionButtonGroup是否显示操作按钮boolean—true
showSearchBtn是否显示查询按钮boolean—true
showResetBtn是否显示清空按钮Boolean—true
searchText查询按钮文本string—‘查询’
resetText清空按钮文本string—清空
isFlex是否开启自适应布局boolean—true
formSize尺寸，不同的lebel设置不同的尺寸以适应屏幕, 设置此属性必须设置isFlex为trueboolean—true
model表单数据对象object——
isEnterSearch是否按下回车查询boolean—true
formItemMb表单项的 margin-bottomString—‘16px’
Schemas Attributes
参数说明类型可选值默认值
colonlabel 是否显示冒号boolean——true
prop必填，字段名称, 唯一string————
component必填，输入框类型,stringInput、InputNumber 、TimePicker、DatePicker、Switch、RadioGroup、CheckboxGroup、SelectAll、Select、ApiSelect、ApiTreeSelect、Cascader、ApiCascader、Upload、Divider——
label标签文本string————
label-width表单域标签的的宽度string——’100px‘
required是否必填boolean——false
show表单项显示隐藏boolean——false
componentProps可设置组件属性（element 组件的属性，具体可查看 element 组件文档），如禁用输入框componentProps={disabled: true}object——{}
defaultValue输入框默认值any————
colProps表单项栅格布局，具体看下表object————
rules表单验证规则array————
disabled是否禁用, 如此处设置表单禁用，无需在 componentProps 中设置false————
slots表单项插槽string————
renderContent渲染内容, 需要返回渲染函数，否则会报错Function————
formItemMb表单项的 margin-bottomString——‘16px’
colProps Attributes
参数说明类型可选值默认值
span栅格占据的列数number——8
xs<768px 响应式栅格数或者栅格属性对象number————
sm≥768px 响应式栅格数或者栅格属性对象number————
md≥992px 响应式栅格数或者栅格属性对象number————
lg≥1200px 响应式栅格数或者栅格属性对象number————
xl≥1920px 响应式栅格数或者栅格属性对象number————

Events

事件名称说明回调参数
change值改变时触发，InputNumber 类型输入如果设置默认值, 初始时会触发一次 change 事件e: any
register注册 BasicForm 组件实例, 获取实例上的方法e: object

Slots

name说明
submitBeforesubmit btn 左侧插槽
resetBeforereset btn 左侧插槽
resetAfterreset btn 右侧插槽
moreAfter更多 右侧插槽

Methods

⚠️ 该组件二次封装后需注册 register事件, 获取实例方法, 并且需要保存到当前组件实例中

方法名说明参数
validate校验—
clearValidate清空表单校验—
reset清空表单校验, 清空输入框值—
getFieldValues获取表单的值—
setFieldValues设置表单的值, 返回值是更新之后表单的值object
updateSchema更新表单配置项, prop 必须存在 schemas 中, 不存在则更新失败—
insetSchema插入表单项field, schema
removeSchemaByFiled删除表单项field
resetSchemas重置配置项, 恢复初始值—

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1184506.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Kubernetes平台部署Grafana Loki Promtail系统

Kubernetes平台部署Grafana Loki Promtail系统

部署结构图&#xff1a; Loki 是主服务&#xff0c;负责存储日志和处理查询promtail 是代理&#xff0c;负责收集日志并将其发送给 lokiGrafana 用于 UI 展示 只要在应用程序服务器上安装promtail来收集日志然后发送给Loki存储&#xff0c;就可以在Grafana UI界面通过添加Lok…
阅读更多...
网络工程师回顾学习（第二部分）

网络工程师回顾学习（第二部分）

第六章&#xff1a;网络互连与互联网 需要掌握&#xff1a; &#xff08;1&#xff09;网络互连设备 &#xff08;2&#xff09;网络互连的基本原理和关键技术 &#xff08;扩展&#xff1a;TCP/IP协议簇&#xff09; &#xff08;3&#xff09;Internet协议及其提供的网络…
阅读更多...
【python海洋专题四十】海洋指数画法--单色填充图

【python海洋专题四十】海洋指数画法--单色填充图

【python海洋专题四十】海洋指数画法–单色填充图 【python海洋专题四十】海洋指数画法–单色填充图 数据：AMO_index 图像展示： 图片 往期推荐 图片 【python海洋专题一】查看数据nc文件的属性并输出属性到txt文件 【python海洋专题二】读取水深nc文件并水深地形图 【p…
阅读更多...
详细记一下jvm调优整过程

详细记一下jvm调优整过程

cpu占用过高 cpu占用过高要分情况讨论&#xff0c;是不是业务上在搞活动&#xff0c;突然有大批的流量进来&#xff0c;而且活动结束后cpu占用率就下降了&#xff0c;如果是这种情况其实可以不用太关心&#xff0c;因为请求越多&#xff0c;需要处理的线程数越多&#xff0c;这…
阅读更多...
解密Elasticsearch：深入探究这款搜索和分析引擎

解密Elasticsearch：深入探究这款搜索和分析引擎

•开篇 最近使用Elasticsearch实现画像系统&#xff0c;实现的dmp的数据中台能力。同时调研了竞品的架构选型。以及重温了redis原理等。特此做一次es的总结和回顾。网上没看到有人用Elasticsearch来完成画像的。我来做第一次尝试。 背景说完&#xff0c;我们先思考一件事&…
阅读更多...
分布式数据库·Hive和MySQL的安装与配置

分布式数据库·Hive和MySQL的安装与配置

一、版本要求&#xff1a;Hadoop:hadoop-2.10.1、MySQL&#xff1a;mysql-8.0.35、 HIVE&#xff1a;apache-hive-3.1.2、MySQL驱动&#xff1a;mysql-connector-java-5.1.49 安装包网盘链接&#xff1a;阿里云盘分享 安装位置 Hive:master、MySQL:slave1 二、卸载已安装的…
阅读更多...
智能柜+MRO：制造业中的自动售货机

智能柜+MRO：制造业中的自动售货机

每当谈及企业数字化转型&#xff0c;多数人想到的是人工智能、大数据等高端技术的应用&#xff0c;或是原有业务流程和运营方式的数字化与自动化&#xff0c;实现大幅降本增效等。然而&#xff0c;对于急需在数字时代找到生存之道的企业来说&#xff0c;数字化转型的要求远不止…
阅读更多...
如何通过CRM系统进行销售机会管理?

如何通过CRM系统进行销售机会管理?

销售机会管理是在销售过程中对潜在客户的精细化管理&#xff0c;销售机会管理的本质是公司用于管理销售机会通用的工具和方法。对于希望建立长期客户关系的现代销售团队来说&#xff0c;CRM客户管理系统是必不可少的工具。那企业如何通过CRM系统进行销售机会管理&#xff1f; …
阅读更多...
抖音AAN服务商有几家？

抖音AAN服务商有几家？

大家都知道抖音服务商多如牛毛&#xff0c;有本地生活服务商&#xff0c;MCN机构服务商&#xff0c;企业认证服务商&#xff0c;ISV服务商等等。但是aan服务商就屈指可数。 aan技术服务商 从关系层面讲&#xff0c;aan服务商的关系友好到啥程度呢&#xff0c;就好比微信指定了…
阅读更多...
强强联合！Flat Ads出席云栖大会，加入阿里云“橙”云出海服务联盟

强强联合！Flat Ads出席云栖大会，加入阿里云“橙”云出海服务联盟

10月31日&#xff0c;一年一度的科技盛会云栖大会在杭州云栖小镇正式开幕。本届云栖大会以“计算&#xff0c;为了无法计算的价值”为主题&#xff0c;除两场重磅主论坛外&#xff0c;还邀请1000多位行业实干家&#xff0c;带来500余场主题分享与互动&#xff0c;通过演讲、研讨…
阅读更多...
分享：轰动全球的12大创意二维码营销案例！

分享：轰动全球的12大创意二维码营销案例！

今天我们要分享是12个非常有影响力、引起全球轰动的、很成功的创意二维码营销案例。在日常工作中二维码被我们用来存储和分享信息&#xff0c;与此同时&#xff0c;二维码也正在各大展览活动中、电影大片里、全球体育赛事相关活动中、时尚T台上…大展风采&#xff0c;它们帮助品…
阅读更多...
Linux内核分析(九)--CPU上下文

Linux内核分析(九)--CPU上下文

目录 一、引言 二、CPU上下文 ------>2.1、CPU上下文切换 三、线程上下文切换 ------>3.1、协程 四、中断上下文切换 ------>4.1、vmstat ------>4.2、pidstat ------>4.3、sysbench 一、引言 Linux是一个多任务的操作系统，可以支持远大于CPU数量的…
阅读更多...
数据结构与算法—插入排序选择排序

数据结构与算法—插入排序选择排序

目录 一、排序的概念 二、插入排序 1、直接插入排序 直接插入排序的特性总结&#xff1a; 2、希尔排序 希尔排序的特性总结&#xff1a; 三、选择排序 1、直接选择排序 时间复杂度 2、堆排序—排升序(建大堆) 向下调整函数 堆排序函数 四、交换排序 1、冒泡排…
阅读更多...
vue+css动画 实现文字的上下轮播切换

vue+css动画 实现文字的上下轮播切换

突然间碰到一个比较丝滑的特效，就研究了一下想把它实现出来。 效果：渐隐消失，底部往上走覆盖出现 以下是完整代码，复制粘贴即可运行 <template><div class="aaa"><divclass="page1":class="{ private-fade-out: prevIndex === 1…
阅读更多...
window11安装nvm

window11安装nvm

链接 默认已经安装了node 没有安装的请看链接 github下载最新nvm https://github.com/coreybutler/nvm-windows/releases 找到github下面的 解压之后 安装exe文件 路径自己选择 配置路径和下载源 找到nvm安装路径 -> 找到 settings.txt 文件 -> 配置下载源 node_m…
阅读更多...
CSS 下拉菜单、提示工具、图片廊、计数器

CSS 下拉菜单、提示工具、图片廊、计数器

一、CSS 下拉菜单&#xff1a; CSS下拉菜单用于创建一个鼠标移动上去后显示下拉菜单的效果。示例&#xff1a; <style> .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f…
阅读更多...
下拉列表框Spinner

下拉列表框Spinner

在XML文件中的创建 <Spinnerandroid:id"id/spinner"android:layout_width"wrap_content"android:layout_height"wrap_content"/> 在Java文件中的设置 //获取Spinner对象 Spinner spinnerfindViewById(R.id.spinner); //创建数组…
阅读更多...
MoveFunsDAO 星航计划｜从Move入门Web3与深入实践「公益课堂」

MoveFunsDAO 星航计划｜从Move入门Web3与深入实践「公益课堂」

Move 语言作为最安全的编程语言之一&#xff0c;在资产的安全性和保护方面有着显著优势&#xff0c;被寄予引领 Web3 世界的全新叙事的厚望。 随着 Sui 在今年五月主网上线&#xff0c;它为 Move 生态带来一股新的浪潮。上线以来&#xff0c;Sui 公链的开发活跃度持续数月位居…
阅读更多...
C/C++轻量级并发TCP服务器框架Zinx-游戏服务器开发005：守护进程与进程监控

C/C++轻量级并发TCP服务器框架Zinx-游戏服务器开发005：守护进程与进程监控

文章目录 1 守护进程1.1 进程组和会话1.2 会话的相关概念1.3 守护进程的概念1.4 守护线程的特点1.5 守护进程创建的基本步骤1.6 本项目守护进程的实现 2 进程监控2.1 进程监控的实现 1 守护进程 1.1 进程组和会话 进程除了有进程的PID之外还有一个进程组&#xff0c;进程组是…
阅读更多...
【Git】Git 学习笔记_操作远程仓库

【Git】Git 学习笔记_操作远程仓库

1. SSH 配置和克隆仓库 ssh-keygen -t rsa -C "xxxqq.com"回车后出现以下内容&#xff0c;直接回车&#xff1a; Generating public/private rsa key pair. Enter file in which to save the key (/Users/your_user_directory/.ssh/id_rsa): (按回车键) Enter pass…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023