Form 表单组件(王丹雷)

基础用法

<template>
  <div>
    <h-form :form="form" :formData="formData" :form-buttons="formButtons" form-btn-position="right" f
            label-width="120px">
      <template slot="abilityIndate">
        <div>我是插槽slot自定义组件</div>
      </template>
    </h-form>
  </div>
</template>

<script>
// import HUpload from "../../../../src/packageBase/upload/src/upload";

export default {
  data() {
    return {
      form: {   //表单字段值
        name: '',
        description: '',
        resourceType: 'API',
        softwarePlatformType: 2,
        provider: '',
        abilityIndate: '',
        report: ""
      },
      formData: [//表单配置
        {
          title: '基本信息',
          split: 1,
          fold: true,
          data: [
            {
              label: '能力名称',
              key: 'name',
              name: "el-input",
              size: "small",
              disabled: true,
              placeholder: '请输入不超过40字符能力名称',
              rules: [
                {required: true, validator: this.checkName, trigger: 'change'},
              ]
            },
            {
              label: '能力介绍',
              key: 'description',
              width: 2,
              disabled: false,
              name: "el-input",
              type: 'textarea',
              maxlength: '400',
              rows: "4",
              showWordLimit: true,
              placeholder: "请输入能力介绍，支持中文、英文、数字，常用标点符号，最大不超过400字。",
              rules: [
                {required: true, validator: this.checkDescription, trigger: 'change'},
                {max: 400, message: '能力介绍长度不能超过400个字符', trigger: 'change'}
              ]
            },
            {
              label: '能力类型',
              key: 'resourceType',
              disabled: false,
              name: "el-radio",
              placeholder: '请选择能力类型',
              size: "small",
              options: [
                {
                  label: 'API',
                  value: 'API'
                },
                {
                  label: 'SDK',
                  value: 'SDK'
                },
                {
                  label: 'APK',
                  value: 'APK'
                },
                {
                  label: '其他',
                  value: '其他'
                }
              ],
              rules: [
                {
                  required: true, message: '请选择能力类型', trigger: 'change'
                }
              ],
              events: {
                change: (value) => {
                  alert('我是change事件！')
                }
              }
            },
            {
              label: 'SDK类型',
              key: 'sdkType',
              name: "el-radio",
              hidden: true,
              disabled: false,
              size: "small",
              options: [
                {
                  label: '设备SDK',
                  value: 1
                },
                {
                  label: '语音SDK',
                  value: 2
                },
              ],
              rules: [
                {
                  required: true, message: '请选择SDK类型', trigger: 'change'
                }
              ]
            },
            {
              label: '软件平台',
              key: 'softwarePlatformType',
              name: "el-radio",
              hidden: true,
              disabled: false,
              size: "small",
              options: [
                {
                  label: 'Android',
                  value: 3
                },
                {
                  label: 'Linux',
                  value: 2
                },
                {
                  label: 'RTOS',
                  value: 1
                }
              ],
              rules: [
                {
                  required: true, message: '请选择软件平台', trigger: 'change'
                }
              ]
            },
            {
              label: '能力提供方',
              key: 'provider',
              name: "el-select",
              disabled: false,
              size: "small",
              placeholder: '请输入能力提供方',
              options: [
                {
                  label: "IoT",
                  value: "IoT"
                },
                {
                  label: "大数据",
                  value: "大数据"
                }
              ],
              rules: [
                {
                  required: true, message: '请选择能力提供方', trigger: 'change'
                }
              ]
            },
            {
              label: '能力有效期',
              key: 'abilityIndate',
              name: "custom",
            },
            // {
            //   label: '上传质量报告',
            //   disabled: false,
            //   key: 'report',
            //   name: HUpload,
            //   size: 'small',
            //   imageValid: {
            //     uploadType: 'file',
            //     format: ['xls', 'xlsx', 'doc', 'docx', 'pdf', 'rar', 'zip'],
            //     size: 30,
            //   },
            //   url: "/services/openservice/open/ability/platform/ability/registration/image/upload",
            //   template: '我是组件形式的自定义组件'
            // }
          ]
        }
      ],
      formButtons: [
        {
          name: 'submit',
          text: '确定',
          type: 'primary'
        },
        {
          name: 'cancel',
          text: '取消'
        }
      ],
    }
  },
}
</script>

<style lang="scss" scoped>

</style>

显示代码

Form Attributes

参数	说明	类型	可选值	默认值
form	表单数据对象	object	—	{}
formData	表单配置对象	array	—	[]
labelWidth	表单域标签的宽度	string	—	—
labelPosition	表单域标签的位置	string	right/left/top	left
formButtons	表单按钮配置	array	—	-
formBtnPosition	表单按钮按位置	string	left/center/right	left
isRequiredRedStarRight	必填项红色星号是否居右	boolean	—	false
disabled	是否禁用	boolean	—	false

FormData-Item Attributes(表单组配置)

参数	说明	类型	可选值	默认值
title	分组名称	string	—	-
split	组内列，做多支持分4列	number	1/2/3/4	1
fold	组折叠按钮配置	boolean	true/false	true
data	配置组表单控件集合	array	—	[]

FormData-Item-Data-Item Attributes（表单组控件配置，支持elementUI-组件配置项所有配置）

参数	说明	类型	可选值	默认值
key	组件唯一标识	string	—	—
width	控件占几列，做多支持分4列	number	1/2/3/4	-
hidden	显示/隐藏配置	boolean	true/false	false
name	控件名称（当值为custom则为插槽slot形式加载自动组件，值为组件名称时则作为组件形式加载）	string/component	—	—
events	事件注册对象	object	-	-

Form Slot

name	说明
custom	Form 自定义的内容

Events

方法名	说明	参数
on-submit	表单提交方法，自义定表单按钮type为submit时生效	-
on-cancel	表单取消方法，自义定表单按钮type为cancel时生效	-
validate	与elementUI表单validate事件一致	-
reset	表单重置方法	-
clearValidate	与elementUI表单clearValidate事件一致	-
setFormDataAttr	更新控件属性方法	object
updateFormDataGroupAttr	更新组属性方法	object